Support » Plugin: Jetpack by WordPress.com » Responsive Tiled Galleries

  • Resolved bryananthonylewis

    (@bryananthonylewis)


    I have a responsive website using Twitter Bootstrap and am using the Tiled Galleries functionality of Jetpack. When I resize my browser after placing a gallery on a post the gallery overlaps and this section looks bad. Are the Tiled Galleries suppose to be responsive? If so what am I doing wrong ?

    http://wordpress.org/extend/plugins/jetpack/

Viewing 11 replies - 1 through 11 (of 11 total)
  • Okay so maybe its me. Its responsive and working fine on one post but not on another.

    It works when you use the “square tiles” setting FYI.

    Plugin Author Jeremy Herve

    (@jeherve)

    Jetpack Mechanic

    Tiled Galleries are supposed to be responsive. If you experience issues with some of he gallery formats, could you post a link to one of the posts, so I can have a look?

    I replicated it on my own site for spamming possibilities…

    http://www.bryananthonylewis.com/2012/07/19/new-pics/

    When I’m using the “tiles” setting it doesn’t work which you can see in that link. When I change the setting to “square tiles” it works fine.

    Let me know your thoughts.

    Plugin Author Jeremy Herve

    (@jeherve)

    Jetpack Mechanic

    Thanks for the link, it’s very helpful!

    Could you try adding the following CSS rule to your theme stylesheet, or to your custom CSS editor under Appearance > Edit CSS?

    #content {
    width: 100%;
    }

    Anytime, I’m happy to help out!

    Yes, I’ve added #content { width: 100%; } to my style.css stylesheet.

    Here is what I came up with. All of the images are preserved on different resolutions, however, you loose the nice layout effect after the width reaches a certain point.

    .tiled-gallery .gallery-row {
        margin-bottom: 2px;
        max-width: 100%;
    }

    This will allow the images to remain fully visible without scrolling left to right.

    Edit– blah not showing all images, working on it

    I believe it has to do with the per-defined media elements in your style sheet. The site responds at different resolutions.

    If I look at the site on my ipad, it re sizes and looks perfect.

    Same thing if I set by browser width to the width of those devices.

    It is the intermediary resolutions (just over and under those predefined in your media elements) where the pictures show up goofy.

    That seemed to work well! I’ll leave it in there.

    @jeremy ┬áif you’d like me to keep messing around with code I can do that too. If you need to experiment.

    Plugin Author Jeremy Herve

    (@jeherve)

    Jetpack Mechanic

    @bryananthonylewis That seems to work on my end as well.

    if you keep experiencing issues, you might want to try the Jetpack Mobile Theme module. Although your mobile theme already looks great as it is!

    @jeremy Thanks! I hope that helps future proof this awesome product a bit more!

    I really appreciate it!

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Responsive Tiled Galleries’ is closed to new replies.