Photo gallery sizing on desktop vs. mobile

Ask the Community Customization
1

Having an issue with the display size of the photo gallery with a header/text underneath in the “slider layout” on mobile vs. desktop. The text must appear off the picture, not as a hover, so this takes a portion of the widget’s height. On desktop the 16:9 photo ratio is ideal, except it breaks and distorts on mobile. On mobile, the 1:1 square ratio is better, except it then takes up significant space on the desktop view. Can you please provide some code or alternative to better adjust the sizing to the screen type?

2 Likes
3

Hi there, @Allegheny_County :wave:

Sure! For this, set 16:9 image ratio in the settings and this code to the Custom CSS field on the Style tab of your widget’s settings:

@media screen and (max-width: 768px) {
    .eapp-photo-gallery-slider-item-component {
      padding-top: 100% !important;
    }
}

Please check it out and let me know if you like the result :wink:

2 Likes