WordPress.org

Ready to get started?Download WordPress

Forums

Jetpack by WordPress.com
[resolved] Page thumbnails misaligned on mobile view (11 posts)

  1. wpforum
    Member
    Posted 6 months ago #

    I noticed the Page thumbnail galleries are still misaligned.

    I thought by making the Page width:100%; it would work like in the Projects. But it doesn't

    In Style.css

    /* Pages Communiqué – main */
    .postid-85 .project .details {
    display: none;
    }
    .postid-85 .visuals {
    width:100%;
    }
    
    /* Projects Communiqué – main */
    .postid-266 .project .details {
    display: none;
    }
    .postid-266 .visuals {
    width:100%;
    }

    It should be 3 across on a desktop
    1 2 3
    4 5 6
    and two across on the mobile vertical view
    1 2
    3 4
    5 6

    instead on the mobile view it's
    1 2
    (3 should be here) 3
    4 5
    6

    https://wordpress.org/plugins/jetpack/

  2. Richard Archambault
    Happiness Engineer
    Plugin Author

    Posted 6 months ago #

    Could you post your site URL here, so I can have a look?

    If you want it to remain private, you can also contact us via this contact form:
    http://jetpack.me/contact-support/

    Make sure to include a link to this thread in your message.

  3. wpforum
    Member
    Posted 6 months ago #

    http://blog.cvhinteriors.com/projects/communique/
    - The carousel gallery stays 3 images across on on all size screens. Great.

    http://blog.cvhinteriors.com/communique/
    - The mobile view causes the 3 image to the right to move down to it's own row.
    Instead of
    123
    45

    It's
    12
    3
    45

    Extra appreciative if you can help with:
    http://wordpress.org/support/topic/how-to-adjust-vertical-space-between-thumbnail-images-and-captions?replies=1

    Muchas Gracias!!!

  4. Richard Archambault
    Happiness Engineer
    Plugin Author

    Posted 6 months ago #

    Hi!

    I think it's because you have set the Thumbnail gallery to have 3 columns, which is respected by your site's Mobile theme, so after the 3rd image, it adds an

    <br style="clear: both">

    Try changing the gallery to have 8 columns, for example (which is more than the number of images you have) and see if that helps.

  5. wpforum
    Member
    Posted 6 months ago #

    Gracias. Now the mobile view shows 2 on each row, and 3 across on the desktop, which I think works. I wish the thumbnails were a little bigger on the mobile view.

  6. wpforum
    Member
    Posted 6 months ago #

    I noticed the thumbnails overlap on http://blog.cvhinteriors.com/style/. How can I fix this?

  7. Richard Archambault
    Happiness Engineer
    Plugin Author

    Posted 6 months ago #

    Hi,

    they all look good to me. Did you fix it yourself?

  8. wpforum
    Member
    Posted 5 months ago #

    I didn't fix the overlapping really. I figured out the vertical images look fine (no overlap), but horizontal images on Pages overlap.

    Notice the big space between the images and captions at http://blog.cvhinteriors.com/projects/style-commercial/ ? How can I bring bring closer together, like in the vertical images?

  9. Richard Archambault
    Happiness Engineer
    Plugin Author

    Posted 5 months ago #

    Again, it looks good to me now, so it seems you've found a solution already.

  10. wpforum
    Member
    Posted 5 months ago #

    I changed the margin to auto ! important.

    Let me know where I can add code to add vertical space between images on mobile screens. There is the right amount of space on desktops.

    #gallery-1{display: inline; vertical-align: middle; margin: auto; line-height: auto ! important;}
    #gallery-2{display: inline; vertical-align: middle; margin: auto; line-height: auto ! important;}
    
    #gallery-1 .gallery-item {
      margin-left: 40px !important;
    }
    
    body #gallery-1 img {
         display: inline ! important;
         vertical-align: middle ! important;
         margin: auto ! important;
         line-height: auto ! important;
    }
    
    body #gallery-2 img {
         display: inline ! important;
         vertical-align: middle ! important;
         margin: auto ! important;
         line-height: auto ! important;
    }
  11. Richard Archambault
    Happiness Engineer
    Plugin Author

    Posted 5 months ago #

    Hi,

    You might want to look into Media quieries for that:

    https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Reply

You must log in to post.

About this Plugin

About this Topic