WordPress.org

Ready to get started?Download WordPress

Forums

Jetpack by WordPress.com
[resolved] Responsive Tiled Galleries (12 posts)

  1. bryananthonylewis
    Member
    Posted 1 year ago #

    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/

  2. bryananthonylewis
    Member
    Posted 1 year ago #

    Okay so maybe its me. Its responsive and working fine on one post but not on another.

  3. bryananthonylewis
    Member
    Posted 1 year ago #

    It works when you use the "square tiles" setting FYI.

  4. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    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?

  5. bryananthonylewis
    Member
    Posted 1 year ago #

    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.

  6. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    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%;
    }
  7. bryananthonylewis
    Member
    Posted 1 year ago #

    Anytime, I'm happy to help out!

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

  8. scattered810
    Member
    Posted 1 year ago #

    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

  9. scattered810
    Member
    Posted 1 year ago #

    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.

  10. bryananthonylewis
    Member
    Posted 1 year ago #

    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.

  11. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    @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!

  12. bryananthonylewis
    Member
    Posted 1 year ago #

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

    I really appreciate it!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic