Forcing a Specified Height for a Content Band

[kellymowrer]

Hello, love X Theme! I’m using the WPBakery Visual Builder on a page and have an image as a background for a content band. How can I force the content band to be the same height as the background image? I’m floating some text and buttons in one of the two columns, and combining with a gap element to equal the image height - but depending on browser window size, it resizes my content band and the top of the image is cut off for most views. I want to avoid this - is there a way to allow the page to resize as needed to be responsive, but also maintain the full view of the background image? Thanks!!

[nabeel]

Hi @kellymowrer,

Thank you for reaching out to us. There is an option of Full height section in the sections’s settings, you can turn it on to set the section to full height (see screenshot)

Alternatively if you need a specified height, you can assign a class to your section and using custom CSS you can set the height of your section see https://www.w3schools.com/cssref/pr_dim_height.asp

Hope this helps!

[kellymowrer]

Hi Nabeel, thanks so much for the response. Unfortunately I don’t see the “Full height section?” checkbox in my WPBakery page builder content band settings. Or perhaps I’m looking in the wrong place, as I don’t see the term “section” appearing either. Is this where I should be looking?

[ruenel]

Hello @kellymowrer,

You must be using the Legacy X Integration and not the vanilla version of WPBakery Page Builder plugin. In that case, please go with the alternative method as suggested by @Nabeel. Use the Extra Class Name field and add custom-section. Lastly, go to X > Theme Options > Custom CSS and add this custom CSS code:

 .custom-section {
   min-height: 1000px;
}

I am assuming that the height of your background image is 1000. Feel free to reduce or increase with the actual dimension. If this is NOT helping, provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WordPress Admin username / password
​
To know how to create a secure note, please check this out: https://theme.co/docs/getting-support

Regards.