[shaneoriordan]

Hi,

Just wondering how I might set dynamic height of a content section (or any element) to change based on the content contained?

At present all I see is the ability to set a fixed (unchanging height) or Full Screen Height (with set pixel count adjustment). With the Full Height Option, is there a way to make the height adjustment a percentage instead of a fixed pixel amount? ie., 50vw to set Half Screen Height? – same would be desirable in other elements.

Is there a way to set a minimum and maximum height for a content section, or indeed any element?.

Many thanks

Shane

[shaneoriordan]

In addition, when I set height, on screen resize the content sections do no adjust to the content and so overflow into next section.

Also have issues with content sections over-lapping.

Too many issues with no obvious solutions.
CSS is not doing the rick.

[Intense Visions]

Shane,

If you do not set a height, the content section will adjust to the height of the content inside of the content section. You can adjust the padding to help control the height some too. We don’t currently have a way to set the height to a percentage or min/max height. One way that you can adjust the height for different screen sizes is to use the Responsive Utility shortcode along with the Spacer shortcode. I am including a Content Section shortcode below that shows the Responsive Utility and Spacer shortcodes, along with the Heading shortcode.

[intense_content_section padding_top="25" padding_bottom="25"]
[intense_responsive_utility visible_large="1" visible_medium="1" hidden_small="1" hidden_extra_small="1"]
[intense_spacer type="block" height="100"]
[/intense_responsive_utility]
[intense_heading font_size="40" line_height="45" font_color="#000000" font_weight="600" align="center"]
This is an example heading
[/intense_heading]
[intense_responsive_utility visible_large="1" visible_medium="1" hidden_small="1" hidden_extra_small="1"]
[intense_spacer type="block" height="100"]
[/intense_responsive_utility]
[/intense_content_section]

The above Content Section will have a total of 125 pixels of padding above and below the Heading text (25 from the Content Section and 100 from the Spacer) on large and medium screen sizes. Once the screen reaches the “small” size and down, the 100 pixels of padding will be removed. This does add some flexibility.

As you’ve found, setting a set height is not the best solution. It can he handy for sections that don’t have anything in them, or only have a title or small amount of text. That is why we suggest not setting a height and letting the Content Section adjust to the size of its content.

If you need further help, please let us know.

Thanks!

[Author]

Posts