Setting the max height of a section to 20VH but also need to set a Min height for when i resize the window - Min and Max Height CSS

Hi all,

On my site, all of the pages start with a banner image and then the second section should be set at a Section Height of 20. 

I am normally using one-line titles in this second section. That way, when I set my banner image above to a Section Height of 80, the section height of these two sections totals 100 and therefore the page upon loading fits perfectly into the viewport on desktop.

If I use more than one line of text in my second section (Section Height = 20), this seems to push the section out of the 100 section height viewport. 

So, to combat this, I need to reduce the padding around the second section on sections with more than one line.

Through playing around, I set a max-height: 20VH for the section in question:
https://hexahedron-soybean-zdl8.squarespace.com/
Password: testing123
(The section where it says Intelligent Engineering. Service Driven.)

This seems to work perfectly as it removed some padding and center-aligned the text within the section exactly how I wanted it.

However, as I resize my screen, by dragging the bottom of the webpage up, it seems that the section starts to get too small and the text starts to become cut off.

Is there a way I can force a max-height of 20 but also keep that as a min-height as well.

I read somewhere that min-height over rules max-height however I'm still learning CSS so any info is greatly appreciated.

Picture 1 of viewing it on a full screen size desktop - This is exactly how i want it to look.

Picture 2 of viewing it with a reduced window size. - It starts to cut off the text

Many thanks in advance,
Jon 

Just now, JonnyIlsley said:

Hi all,

On my site, all of the pages start with a banner image and then the second section should be set at a Section Height of 20. 

I am normally using one-line titles in this second section. That way, when I set my banner image above to a Section Height of 80, the section height of these two sections totals 100 and therefore the page upon loading fits perfectly into the viewport on desktop.

If I use more than one line of text in my second section (Section Height = 20), this seems to push the section out of the 100 section height viewport. 

So, to combat this, I need to reduce the padding around the second section on sections with more than one line.

Through playing around, I set a max-height: 20VH for the section in question:
https://hexahedron-soybean-zdl8.squarespace.com/
Password: testing123
(The section where it says Intelligent Engineering. Service Driven.)

This seems to work perfectly as it removed some padding and center-aligned the text within the section exactly how I wanted it.

However, as I resize my screen, by dragging the bottom of the webpage up, it seems that the section starts to get too small and the text starts to become cut off.

Is there a way I can force a max-height of 20 but also keep that as a min-height as well.

I read somewhere that min-height over rules max-height however I'm still learning CSS so any info is greatly appreciated.

Picture 1 of viewing it on a full screen size desktop - This is exactly how i want it to look.

Picture 2 of viewing it with a reduced window size. - It starts to cut off the text

Many thanks in advance,
Jon 

@tuanphan We have looked at these sections previously and sorted everything else out when it came to resizing on mobile, however, I just noticed this on this one section as it's the only one where I am using text over more than one line.

14 hours ago, Sdavid_08 said:

To set a maximum height of a section to 20vh and a minimum height when the window is resized, you can use the "min-height" and "max-height" CSS properties. Here's an example:

arduinoCopy code

.section { max-height: 20vh; min-height: 10vh; }

In this example, the "max-height" property sets the maximum height of the section to 20vh (i.e., 20% of the viewport height), while the "min-height" property sets the minimum height to 10vh.

When the window is resized, the section will maintain a height between 10vh and 20vh, depending on the available space. If there is not enough space to accommodate the maximum height, the section will automatically adjust its height to fit the available space while still respecting the minimum height.

I thought this would be the case but it doesn't work for me. 

When resizing, the section still goes too small even with a max and min height set.


Ideally I would like the max and min height to both be 20VH