[Resolved] Center page images on mobile only

Home Forums Support Center page images on mobile only

  • This topic has 9 replies, 2 voices, and was last updated 1 year ago by Leo.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1211303
    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

    #1211318
    Leo
    Staff
    Customer Support

    Hi there,

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

    #1212256
    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

    #1212294
    Leo
    Staff
    Customer Support

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

    Thanks.

    #1212454
    Evan

    Hey Leo –

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

    Thanks!

    – Evan

    #1212462
    Leo
    Staff
    Customer Support

    Hmm give this CSS a shot:

    @media (max-width: 768px) {
        .wp-block-image .alignleft {
            display: block;
            float: none;
            margin-right: 0;
            text-align: center;
        }
    }
    #1212468
    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

    #1212472
    Leo
    Staff
    Customer Support
    #1212487
    Evan

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

    Thanks for all your help.

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