Set different alignment for image at smaller screen sizes

  • Hi there!

    I’m dealing with the following issue.

    I’ve been experimenting with wrapping text around images (by aligning the image right), which looks pretty cool on desktop:

    https://ibb.co/N7DNq4D

    However, it doesn’t really work well on smaller screen sizes:

    https://ibb.co/bWNJjcy

    What I want to do, is ensuring that at mobile and tablet screen sizes the image gets centered instead of aligned to the right. Can’t find any native solutions to do this.

    But I assume it’s a pretty common thing people run into.

    What would be the recommended solution? Is there some ready-made CSS for this by any chance?

    Any insights would be much appreciated,

    Joost

    • This topic was modified 3 years, 4 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Developing with WordPress topic
Viewing 6 replies - 1 through 6 (of 6 total)
  • Moderator t-p

    (@t-p)

    I recommend asking at your theme’s support so the theme’s developers and support community can help you with this.

    Thread Starter joost321

    (@joost321)

    But this has nothing to do with the theme right?

    This is just native WordPress functionality: the same issue would probably occur with any theme & Gutenberg.

    It’s hard to help without seeing the html/css code first.
    I think this could be achieved with @media css directive.
    Would you be able to provide steps on how to reproduce this?

    Thread Starter joost321

    (@joost321)

    Sure, I just followed this blog post:

    https://motopress.com/blog/how-to-wrap-text-around-images-in-gutenberg/

    “The easiest way: adding the Image and Paragraph blocks one by one

    Gutenberg is smart enough to wrap your text around an image when you simply add the corresponding blocks one by one (1. image 2. paragraph) and then set the needed image alignment.”

    I just followed the instructions – worked like a charm. But obviously for smaller screen sizes it would still align the image to the right.

    Thank you for adding the steps.
    I can’t reproduce this using default WordPress theme (Twenty Twenty-One in my case).
    There is no “intermediate” stage when the text to the left of the image is displayed as a narrow strip.
    No matter what I do, it’s either this or this.
    I would assume this issue is theme related.
    If you give me the theme name I can try to reproduce it using your theme.

    Thread Starter joost321

    (@joost321)

    Thanks a lot Anton for your help: the theme is Kadence (it has a free version)

    In all fairness, the small strip of text I’m only seeing when using “inspect” in Chrome: I’m not having that on my phone for instance. On my phone, I indeed see the entire image, but the image is aligned right instead of centered, like so:

    https://ibb.co/cxtGdjs

    It’s subtle, but looks slightly unprofessional. Basically what I’m trying to make sure, is that at smaller screensizes the image just “centers”, instead of aligns right.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Set different alignment for image at smaller screen sizes’ is closed to new replies.

Tags