Height of a 'Text Block (Full Width)'

[UDS]

How can I set the height of the ‘Text Block (Full Width)’ element?

[Ben – SUPPORT]

If in the page builder you click the edit icon you can add an extra class for example “extraHeight” then go into “Theme Options -> General Options” and scroll to “Custom CSS” and add (for example)

.extraHeight{
height:550px;
}

Thanks
Ben

[UDS]

Thanks Ben! That does indeed set the height of that element. In my case, less height than the default is what I wanted so I set it to 50px. However, when I do that, the text no longer seems to be centered vertically (middle). It looks aligned to the bottom. In the Page Builder the text looks to be flush top and centered. But when the page is viewed it looks flush bottom.

Any thoughts on how to center the text vertically? It is centered horizontally which is great.

Thanks again for the help with this.

Russ

[Cosmin – SUPPORT]

Hi Russ,

Can you share a link to the page where you’re using this? It might be that the text is clipped because of the height being too small.

Regards,

————————————————————————————————————

Cosmin
Support Assistant

[UDS]

We’re using FlexForm for a sort of Client Portal so II have attached a screen shot if that helps. If not, I’ll request access I can share.

As you will see, the top Text block has the height set as we’d like which we achieved with your instruction but the text does not look centered vertically. The bottom text block is the default height and it looks centered vertically, it’s just a bit too ‘tall’ for the layout we want to do.

Thank you,
Russell

[Cosmin – SUPPORT]

Tried to replicate this and I believe you’d need to reduce the line-height on the page headings.

Try this custom CSS:

.extraHeight.page-heading h1 {
  line-height: 20px !important;
}

Try adjusting that 20px and see how it goes. If no joy, I’ll need to see the site in order to help.

Regards,

————————————————————————————————————

Cosmin
Support Assistant

[UDS]

Thank you for the suggestion and CSS. Do I need to apply both CSS styles, or just the line height on the page headings? I added it to the FlexForm ‘General’ options area so both styles are there separated with a line break. I assume we can add additional custom CSS in the same way?

I tried applying just the line height CSS and also both of the styles together but no joy. If they both need to be applied do I just separate them with a comma, or some other combination?

I can likely provide access to the site if this doesn’t work but thought I’d see if I can get it to work myself.

Thanks again for the great help.

Russ

[Cosmin – SUPPORT]

Hi Russ,

To add both properties, you would do:

.extraHeight {
  height:550px;
}

.extraHeight.page-heading h1 {
  line-height: 20px !important;
}

Regards,
————————————————————————————————————

Cosmin
Support Assistant

[UDS]

Thank you for that. I was able to add that to the Flexform “General Options’ area but how should it be added too the ‘Extra Class Name’ field in the Text Block element? That field is a single line so I wasn’t sure if I should use a comma or some other separator between the two. The above uses a line break but that doesn’t seem to be an option in the Extra Class Name field.

Thanks again for your patience with me in this matter, and for the great support.

Russell

[Ben – SUPPORT]

Just add it into the general options, scroll down and you’ll see “Custom CSS”

Thanks
Ben

[UDS]

Thanks Ben,
I had already added it to the ‘Custom CSS’ section in the General Options. I was wondering how I should add them both to the ‘Extra Class Name’ field when I edit the Text Block element.

I added ‘.extraHeight.page-heading h1’ to that field by itself but it doesn’t have any effect. I also added ‘.extraHeight’ to that field by itself and that does effect the height of the Text Block which is good but then the text is not centered vertically. I was asking how I should add both of those together in the ‘Extra class name’ field… do I use a comma or just a space between them in that single line field.

Thanks again for your help,

Russell

[Cosmin – SUPPORT]

Hi Russel,

In the Extra Class field, you must only add the name. For example in your case, add this bold text: extraHeight

Regards,
————————————————————————————————————

Cosmin
Support Assistant

[UDS]

This reply has been marked as private.

[LeadoutMedia]

I am actually running into the exact same problem, too much space above and below the text on the full-width text box. I have read through this post several times, but still can’t get it sorted.

I have attached screenshots of my current settings and what it looks like on my homepage.

Thanks.

[LeadoutMedia]

Just wanted to give this a bump in case my reply was overlooked, thanks!

Mike