How to limit show slider to max-height: 100vh

[Ned]

I messed around with this for maybe an hour, but couldn’t discern the correct selector(s) to apply the max-height:100vh rule to.

I thought this CSS would do it, but… nah. What am I missing?

div#atwkslider-think-laugh-1 div.atwk-slide,

div#atwkslider-think-laugh-1 div.atwk-slide div.atwk-slide.atwk-active-slide,

div#atwkslider-think-laugh-1 div.atwk-slide div.atwk-slide.atwk-active-slide div.slide-content.slide-image,

div#atwkslider-think-laugh-1 div.atwk-slide div.atwk-slide.atwk-active-slide div.slide-content.slide-image img.atw-gallery-img {max-height: 100vh}

[scrambler]

Please provide a link to the page so I can test.

[Ned]

Hi Scrambler,

Here is a test page (on the live site) with just the code for the show slider:

https://imagined.com/tp/

I removed all the CSS that attempts to set the max-height.

If you might need admin access, I can clone the site to a staging area and give you admin access there.

[scrambler]

This reply has been accepted as the best answer.

The rule that works seems to be

.atwkslider-think-laugh .slides .atwk-slide img {max-height:100vh;}

or

.this-slider .slides .atwk-slide img {max-height:100vh;}

placed in the slider CSS box

Now if the goal is that the images are always fully visible when the height of the browser gets smaller, you need to substract the size of what is above it and that is impossible to do exactly without javascript that would actually calculate it.

You can approximate it with the calc function, with something like

max-height: calc(100vh – 150px – (100vw / 1100) * 180);

What this does is:

• Remove a fixed amount of 150px to the 100vw (to account for any fixed size elements)
• Remove a proportional amount of the header image. When the browser is below 1100px, the image which is 180px highjt scales down by 100vw/1100.

The calc function is very finicky, so I suggest you do some reading about how to use intricate operations.

As a base guideline.

• It needs a space before and after an operator
• no space between calc and (…)
• Division needs to be with a unitless number
• One of a multiplication needs to be unitless
• make sure you use real minus signs not long dash (some editors will replace the minus by a long dash)

 

 

 

[Ned]

Thank you so much, Scrambler for your detailed, accurate and speedy solution. Very much appreciated. As your TipJar preference indicated, I have donated $20 to Apne Aap USA. Keep up the good work!

[Author]

Posts