slideshow cosmetic issues via mobile

What you’ll want to do is add the following into your responsive stylesheet…

.responsive .slideshow_container {
display: flex;
margin-bottom: -100%;
}

Then head into the slideshow’s settings and hit ‘yes’ on “Shrink slideshow’s height when width shrinks” (The default is ‘no’).

Tinker with the aspect ratio above the ‘image behavior’ field. I’ve got a squareish slideshow running on one of my sites, so 5:4 works best in this particular case.

And if you can’t figure out the aspect ratio for your slideshow, use this calculator. You’ll have to determine the height and width of your image slides first however.

Hi Thekat!

I have everything working the way I like, but I’m told this is the problem: <div class=”slideshow_container .slideshow_container_style-light” style=”height: 480px; “>

I have CSS already that I THOUGHT changed that, and its here:

@media only screen and (max-device-width: 480px) {
.slideshow_container .slideshow_slide {
height: auto!important;
}
}

this code does work! but the height is what’s causing the problem with the page.

OH! I should mention that I can’t do this:

Then head into the slideshow’s settings and hit ‘yes’ on “Shrink slideshow’s height when width shrinks” (The default is ‘no’).

why? because the height does have to be set to 480px for the Desktop version. but I want it to be auto for mobile.. hmmmm unless I can set it to 480px via CSS for desktop! I’ll try that way too!

thanks so much for your time!

yes! I did as you said, and confirmed the aspect ratio, which is 2:1, and it works perfect for both the desktop AND the mobile! and I don’t need any mobile code.

thanks so much!