Home Forums Weaver Show Posts & Show Sliders How to limit show slider to max-height: 100vh

Topic Resolution: Answered
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #67407
    Answered
    Ned
    Participant

    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}

    #67408
    scrambler
    Moderator

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

    #67409
    Ned
    Participant

    Hi Scrambler,

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

    Test page for Scrambler

    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.

    #67412
    Best Answer
    scrambler
    Moderator

    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)

     

     

     

    #67418
    Ned
    Participant

    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!

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.