Jetpack Slideshow Wrapper breaks mobile layouts

  • Resolved James Monroe

    (@jhmonroe)


    1 year, 1 month ago

    For some reason, the Jetpack Slideshow has a wrapper that ON MOBILE ends up having a height that adds a lot of whitespace around the slideshow and a width in the tens of thousands (or more) depending on how many slides you have. On desktop (in Chrome) it doesn’t seem to affect anything, but on mobile is causes the page to be wider than the viewport and breaks the rest of the layout. In this site, we are using all images that are the same exact size and sized for the max width of the site, so that isn’t causing the issue.

    I added some CSS to constrain the wrapper to the viewport. If you use inspector and turn off this max-width and height on the swiper-wrapper you’ll see what happens:

    @media only screen and (max-width: 835px) and (orientation: portrait) {	
ul.wp-block-jetpack-slideshow_swiper-wrapper.swiper-wrapper {
height: fit-content !important;
max-width: calc(100vw - 60px) !important;
}
}

    I’ve spent hours troubleshooting in forums and seen other users mention this issue. One such example:

    https://github.com/Automattic/themes/issues/6081
    https://github.com/Automattic/jetpack/issues/22834

    Anyone have any experience with this or understand why the wrapper behaves this way? Is my little CSS hack the only fix?

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Support Erina (a11n)

    (@eri32s98)

    Hi @jhmonroe, thanks for sharing your findings and the GitHub links.
    I wasn’t able to tell which theme is running on your site, is it one that allows Full Site Editing? If so, it could also be this issue https://github.com/Automattic/jetpack/issues/30891.

    Thread Starter James Monroe

    (@jhmonroe)

    1. just a very barebones child theme of 2026 so i can change some styling
    2. issue is somewhat similar to that, but different in that it flashes the correct size for maybe 1 sec, then the wrapper goes beyond the viewport (causing scrollable on mobile and making layout broken if you zoom out) and the image is correctly the same size as viewport)

    You’ll notice adding this code to the <ul> wrapper that wraps the slideshow corrects the problem (-60 is my margin so the image isn’t against edge of viewport on mobile):

    max-width: calc(100vw - 60px) !important;

    https://mmonroedesign.com/residential/cobble-hill/

    It does seem more closely related to this issue where the wrapper results in an extremely wide value (so it seems like the issue is how the wrapper gets calculated by the jetpack plugin maybe): https://github.com/Automattic/jetpack/issues/22834

    It’s also worth noting that I did try putting the slideshow inside a group block to see if this helped control its width… to no avail! ??

    • This reply was modified 1 year, 1 month ago by James Monroe.
    • This reply was modified 1 year, 1 month ago by James Monroe.
    • This reply was modified 1 year, 1 month ago by James Monroe.
    • This reply was modified 1 year, 1 month ago by James Monroe.
    Plugin Support Alin (a11n)

    (@alinclamba)

    Hi @jhmonroe,

    Thank you for the extra details provided, it’s much appreciated.

    I’m happy to hear you managed to find a workaround and wanted to let you know that the details you shared have been added to the GH where this is tracked: https://github.com/Automattic/jetpack/issues/22834

    I don’t have an ETA for a fix, but our developers are actively investigating this and hopefully will include a fix soon.

    Thank you!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Jetpack Slideshow Wrapper breaks mobile layouts’ is closed to new replies.