[Resolved] photo alignment on mobile

Home Forums Support photo alignment on mobile

  • This topic has 8 replies, 2 voices, and was last updated 1 year ago by Leo.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1014447
    Melissa

    2 questions:

    1. With the Gutenberg Gallery block, I’d like the images to stack on mobile. The folks on the WordPress forums said it was a theme issue. Can you help?

    2. I’d like alignwide photos/galleries to be edge-to-edge on mobile. I’ve tried eliminating margins/padding for them in css but can’t seem to get anything to work to remove the final 10px against the screen edge. Any ideas?

    Thank in advance!

    #1014623
    Leo
    Staff
    Customer Support

    Hi there,

    1. Instead of using gallery block, can you use a columns block (2 columns) and then add a image block in each column? Then it should be stacked by default.

    2. I see this CSS added in Simple CSS:

    .site-content {
        padding-left: 20px;
        padding-right: 20px;
    }

    It’s not really possible to only have the image without padding unfortunately.

    Let me know if this helps 🙂

    #1014633
    Melissa

    1. Won’t really work if I have, for example, 2 vertical and a horizontal in a gallery, will it?

    2. But I can’t have ALL the text and such hit the edge. Photos set to “align full” do have only the image without padding. I want the “align wide” images to do the same, but only on mobile.

    #1014636
    Melissa

    #2

    Any idea why this doesn’t work?

    .site-content > *:not( .alignwide ):not( .alignfull ) {
    padding-left:20px;
    padding-right:20px;
    }
    #1014725
    Leo
    Staff
    Customer Support

    1. Try this:

    @media (max-width: 768px) {
        ul.wp-block-gallery {
            display: flex;
            flex-direction: column;
        }
        .wp-block-gallery .blocks-gallery-item, .wp-block-gallery .blocks-gallery-item:last-child {
            margin: auto !important;
        }
    }

    2. What if you remove the media query part from this CSS you are using?

    @media (min-width: 700px) {
        .post .entry-content > *:not( .alignwide ):not( .alignfull ) {
            margin-left: auto;
            margin-right: auto;
            max-width: 640px;
            padding-left: 20px;
            padding-right: 20px;
        }
    }
    #1014767
    Melissa

    1. They did stack, but they were small and misaligned in the center.

    2. That put lots of padding on the mobile text and didn’t do anything to the mobile images.

    #1014909
    Leo
    Staff
    Customer Support

    1. I edited the CSS so they should both be centered now:
    https://generatepress.com/forums/topic/photo-alignment-on-mobile/#post-1014725

    No way to resize the image on mobile using Gutenberg gallery block I don’t think.

    I still think using 2 columns with image blocks would work better – at least when they are two images like this.

    2. Hmm give this a shot:

    @media (max-width: 768px) {
        .site-content {
            padding-left: 20px;
            padding-right: 20px;
        }
        .post .entry-content > *:not(.alignwide ):not(.alignfull ) {
            max-width: 250px;
        }
    }
    #1015608
    Melissa

    1. Okay. I think I will look at using columns instead, as you suggest.

    2. Still no luck. I think I’ll just let this go and live with the margin!

    Thanks so much for working on it!

    #1016025
    Leo
    Staff
    Customer Support
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.