Center aligned photos don’t appear in the center on mobile

Hey,
This css should fix that:

.wp-block-image img {
    margin: auto;
}

Just paste that into your custom css box in Theme Options > Custom CSS.
Hope it helps!

Hannah

Many thanks Hannah. That worked ??

Hi Hannah – The same issue seems to be occurring for images added in a gallery. They’re not getting center aligned on mobile view. What kind of CSS can I add?

Hey,
Can you link to where you’re adding a gallery?
Thanks!

Hannah

Hi there, I haven’t published the post yet, but here’s a preview.

Mobile view:https://imgur.com/gZwHpiT

Web view:https://imgur.com/a/jTDk984

Which block are you using to add the galleries?

Hannah

The gallery block. I’ve tried to use the Kadence block too..but nothing shows up in the latter.

I’m not able to duplicate this issue, so this css is a bit of a guess, but try adding this:

li.blocks-gallery-item {
    margin: auto;
}

Which Kadence Block did you try? When you say nothing shows up, do you mean in the front end or back?

Hannah

I used the advance gallery. Nothing shows up in the front end. Let me try this code.

Doesn’t seem to work still. Here’s the post so you can take a look at the issues:
https://www.funtravelog.com/visiting-death-valley-national-park-with-a-baby

This is the same post where I was trying to use the Nextgen gallery and embed Instagram photos.

In your theme options > advanced settings > custom css box can you add this css:

.wp-block-gallery .blocks-gallery-item img {
    margin: 0;
}

In terms of the Kadence Gallery Block can you post a link to where you have added that so I can see?

Ben

Hi Ben – I already added this custom css when Hannah had shared it earlier, and see no difference. I saved the settings as well. I removed the Kadence Gallery Block because on the front end I could only see a blank space and no images. But, for your reference I’ve added it at the bottom of this post:

https://www.funtravelog.com/covid-19-plan-future-travels

Right above the Instagram embed (for which I’ve opened another ticket)

Hey,
You have a pinterest plugin breaking the gallery. A good way to start troubleshooting is to test by deactivating plugins. I suggest you deactivate your Pinterest plugin and test, it seems to be wrapping the kadence gallery images and breaking the layout.

I see the css I sent now applying to your page here: https://www.funtravelog.com/visiting-death-valley-national-park-with-a-baby seems to be working well. are you still seeing an issue?

Ben

Thank you so much. That worked.