Setting a max height in color sections

Hey Andy- Thanks for your reply.

So the whole top section is wrapped in one color section with several columns inside of it. That includes the image and the copy just below it. The color section is set to 100% minimum height, however I’d also like to specify 100% max height. The reason for doing this is to ensure that both the copy and the image appear on the screen when the page loads.

This is how I’d like the page to load:

This image shows what happens on lower resolution monitors where the height isn’t as tall.

Thanks again.

Thank you guys for your response.

Ismael- Thank you. I’ve used a lot of the quick CSS you’ve written for other questions. Thankful for your input.

Yes, sorry the two images were the same.

The essentially problem is I’d like to be able to ensure all the contents in the color section are ALWAYS visible. Right now the contents are larger than some browser windows causing a scroll. I’m using an easy slider to allow the image to be flexible in size so that it will get smaller to allow all content to stay in the 100% height color section but still the color section is being forced to scroll. I’ve used the below quick CSS with no success.

div#fixedheight {
max-height: 100% !important;
min-height: 100% !important;
}

This is the URL of the page I’m working on: http://mhdb.swamped.com/selected-projects/newport-residence/

Thanks Ismael! We were able to put together a solution with the quick CSS below. We’re using some very specific criteria to ensure this only affects color sections that we intend and not others, so it may not be universally useful to others but thought we’d share in case anyone else can use it.

This also may be somewhat of a wonky solution but it’s been very functional for the specific case we were running into:

You can close this. THANKS!

@media screen and (min-width: 768px) and (max-width: 990px) and (min-height: 50px) and (max-height: 600px) {
#fixedheight .container .av_three_fifth ul.avia-slideshow-inner li img {
height: 100px !important;
width: 127px !important;
}
}

@media screen and (min-width: 768px) and (max-width: 990px) and (min-height: 600px) and (max-height: 700px) {
#fixedheight .container .av_three_fifth ul.avia-slideshow-inner li img {
height: 150px !important;
width: 190px !important;
}
}

@media screen and (min-width: 768px) and (max-width: 990px) and (min-height: 700px) and (max-height: 800px) {
#fixedheight .container .av_three_fifth ul.avia-slideshow-inner li img {
height: 250px !important;
width: 316px !important;
}
}

@media screen and (min-width: 768px) and (max-width: 990px) and (min-height: 800px) and (max-height: 1600px) {
#fixedheight .container .av_three_fifth ul.avia-slideshow-inner li img {
height: 303px !important;
width: 384px !important;
}
}

@media screen and (min-width: 990px) and (min-height: 50px) and (max-height: 600px) {
#fixedheight .container .av_three_fifth ul.avia-slideshow-inner li img {
height: 100px !important;
width: 127px !important;
}
}

@media screen and (min-width: 990px) and (min-height: 600px) and (max-height: 700px) {
#fixedheight .container .av_three_fifth ul.avia-slideshow-inner li img {
height: 200px !important;
width: 253px !important;
}
}

@media screen and (min-width: 990px) and (min-height: 700px) and (max-height: 800px) {
#fixedheight .container .av_three_fifth ul.avia-slideshow-inner li img {
height: 300px !important;
width: 380px !important;
}
}

@media screen and (min-width: 990px) and (min-height: 800px) and (max-height: 1600px) {
#fixedheight .container .av_three_fifth ul.avia-slideshow-inner li img {
height: 407px !important;
width: 516px !important;
}
}