WordPress.org

Ready to get started?Download WordPress

Forums

Jetpack by WordPress.com
[resolved] tiled galleries in mobile view (4 posts)

  1. drkknght
    Member
    Posted 1 year ago #

    Tiled galleries, in the mosaic style, look awesome. However, when scrunched down to a mobile view, they can get a bit funky - at least in my current theme. Take for example this page: http://www.robviously.com/portfolio/fyrebug

    In the desktop web view, it looks fine. However, if you reduce the browser width to a narrow setting (and/or view in a phone browser) some of the images get all squished and distorted. Anything I can do to adjust this?

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

  2. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    I had a look at your site, and I see that you've added some custom styles to your custom CSS editor, under Appearance > Edit CSS in your dashboard.

    Could you try to remove the rules you have added to customize the behaviour of the galleries? You could also wrap them into a CSS media query to make sure they're only applied to the desktop theme.

    Let me know if it helps.

  3. drkknght
    Member
    Posted 1 year ago #

    hi Jeremy, thanks for the response

    you were correct - I went through one by one and found it was this line in my css, to center and put a little spacing around the gallery:

    .tiled-gallery .gallery-row {
    	margin: 10px auto!important;
    }

    is that not a possible happy marriage?

  4. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    I'm afraid not. The additional margins don't seem to fit into the small mobile browser windows.

    But you can use CSS media queries to keep using the CSS rule in your desktop theme, but ignore it when on mobile.

    @media (min-width: 1000px) {
    .tiled-gallery .gallery-row {
    	margin: 10px auto!important;
    }
    }

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic