How to make Jetpack Tiled Gallery responsive

  • Resolved daynag

    (@daynag)


    8 years, 2 months ago

    Hello. I am hoping someone can help me. I’m using Jetpack’s tiled galleries, rectangular, 5 columns on my site to display images. I would like to make these galleries responsive. Currently, if you resize the browser screen to a smaller size (as for mobile phones), the images smoosh up against each other, instead of naturally adjusting to columns of 2 images each (adjusting to the screen size). You can view this here: https://www.jumpingtadpole.com/creative-services/graphic-design/, by adjusting the screen size. Are there some settings I can add to my style.css so that the columns adjust to fit the screen size and the images float accordingly?

    I am using the latest version of WordPress and Jetpack. Thanks in advance for any help you can provide.

    • This topic was modified 8 years, 2 months ago by daynag.
Viewing 4 replies - 1 through 4 (of 4 total)

  • @daynag

    You could look at

    https://iamgw.com/wordpress-plugins/change-jetpack-tiled-gallery-width/

    Thread Starter daynag

    (@daynag)

    Thanks Luke. I don’t think it’s an issue with the gallery width, as the width itself does adjust with screen size. It’s the images that seem to smoosh right up against each other, instead of adjusting their columns from 5 to an appropriate number based on the screen size.

    I was able to do it on another site I have, that does not use Jetpack galleries, but rather lists for the images. You can see that here on this page: https://www.trinitylic.org/ If you adjust the page, the buttons for Worship, Ministries, etc fall underneath each other based on the screen size.

    The Jetpack gallery does not use lists though, and trying to set the dl.gallery-item to display inline doesn’t work either. I’m wondering if there are some settings on the backend that Jetpack is using that I need to override.

    Thread Starter daynag

    (@daynag)

    I was able to resolve this issue by overriding the plugin CSS:
    .gallery-item {
    width:auto !important;

    }

    @daynag

    Glad you where able to fix that issue.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘How to make Jetpack Tiled Gallery responsive’ is closed to new replies.