Site logo

Archived topic

Center align images for mobile and not desktop

1 reply · Started by Daniel on December 6, 2021

Viewing posts 1–2 of 2

Hey Guys, for every article on my site I right align the first image on desktop. Howver on mobile the image gets messed up and doesn’t allign correctly.

Is there a way I can automatically allign my images on mobile to the center? when I allign my images to the center they also allign center on the desktop.

Main problem is I have 300+ articles with this image issue on android mobile phones. It’s weird because when I check on my iphone the image is center aligned normally.

So I need to fix this issue for android users coming to my website.

Here are some examples of the article

example of the article

Hi there,

try this CSS:

@media(max-width: 500px) {
    .site-content .wp-block-image figure {
        float: none;
        text-align: center;
        margin: 0;
        width: 100%;
    }
    .site-content .wp-block-image figure img {
        width: 100%;
    }
}

Adjust the @media max-width 500px to suit when you want it to center.

This archived topic is closed to new replies.