Center page images on mobile only

[Evan]

Hi!

I have a quick question. I’m building a page with a left-aligned image with text wrapping around it. On desktop, this looks great.

On mobile, however, the image displays off-center to the left, but the text is below due to screen size, which makes the image look off.

Is there any CSS or quick fix to have an image on a specific page align center for mobile and left for desktop?

Thanks!

– Evan

[Leo]

Hi there,

Can you guide me to the page in question so I can see the issue?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Evan]

Sure, thanks man!

It’s – https://www.evantarver.com/about/

The issue is on desktop, you see that it’s left-aligned with the text wrapped around it.

On mobile, however, bc of the screen size, the image displays above with the text below it, but since it’s left-aligned it looks off-center on mobile.

I like how the layout looks on mobile, I just want to figure out how to center the image while still allowing it to be left-aligned with text wrapping on desktop.

– Evan

[Leo]

Any chance you can disable Autopimize so I can have a closer look at the source?

Thanks.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Evan]

Hey Leo –

Sure thing, I just disabled Autoptimize. Let me know what you see.

Thanks!

– Evan

[Leo]

Hmm give this CSS a shot:

@media (max-width: 768px) {
    .wp-block-image .alignleft {
        display: block;
        float: none;
        margin-right: 0;
        text-align: center;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Evan]

Thanks Leo!

Hm, so when I add that CSS it fixes the issue on mobile, but then it makes the desktop version align center to match the mobile.

Ideally, there would be a way to align left on desktop, but align center on mobile, or have the left-aligned image auto-center on mobile given it formats to the screen size.

If you have any other thoughts would love to hear it!

– Evan

[Leo]

I forgot to add media query:
https://generatepress.com/forums/topic/center-page-images-on-mobile-only/#post-1212462

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Evan]

Worked! Went ahead and re-activated the autoptimize plugin.

Thanks for all your help.

[Leo]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts