[Resolved] photo alignment on mobile

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

[Leo]

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 🙂

[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.

[Melissa]

#2

Any idea why this doesn’t work?

.site-content > *:not( .alignwide ):not( .alignfull ) {
padding-left:20px;
padding-right:20px;
}

[Leo]

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;
    }
}

[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.

[Leo]

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;
    }
}

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

[Leo]

No problem 🙂

[Author]

Posts