Unexpected image alignment behavior on mobile

  • Jon Whitener

    (@jonwhi5)


    7 years, 7 months ago

    I want to float an image to the right of text when on a desktop-sized viewport. When viewed on mobile, however, I want the image to bump down to appear as a full-width image below the text.

    I’ve tried this with Gutenberg a couple different ways, but neither is giving me what I want. Any suggestions would be appreciated.

    The first image I’m linking to is the WP/Gutenberg editing view in desktop mode. The middle paragraph of text there tells you what’s going on with the two attempts. In the first case, an image block is right-aligned and set to Medium size, followed by a paragraph block of text. In the second case, a 2-column block contains a paragraph block in the left column and an image block in the right column. Both versions look fine on desktop.

    But neither approach gives me what I want on a phone. Again, what I’m trying to get on mobile is the floated image to move down below the text to appear as a full-width image.

    Instead (images linked) what I get is the following:

    With the right-aligned image case, the image appears on top of the text, not below it. See screen shot of right-aligned image on mobile..

    With the columns case, the columns are unfortunately kept side-by-side on the phone, shrinking the image substantially and leaving an empty area below it. See columns screenshot on mobile..

    What I expected/hoped was that on mobile, the columns would stack vertically and not stay side-by-side on a small viewport. I think this is common in responsive design.

    This is a fresh install of WordPress 4.9.8 with the following:

    THEME:
    Twenty Seventeen

    PLUG-INS:
    Gutenberg
    Jetpack by WordPress.com
    Nginx Helper
    WPForms Lite

    I did find some relevant advice from 1.5 years ago on ABrightClearWeb.com, but I was hoping some method might be available by now that doesn’t require extra CSS or plugins.

    Any suggestions?

    Thanks!
    Jon

    • This topic was modified 7 years, 7 months ago by Jon Whitener. Reason: Minor polish
    • This topic was modified 7 years, 7 months ago by Jon Whitener.
    • This topic was modified 7 years, 7 months ago by Jon Whitener. Reason: Added link to ABrightClearWeb.com article
    • This topic was modified 7 years, 7 months ago by Jon Whitener.

    The page I need help with: [log in to see the link]

The topic ‘Unexpected image alignment behavior on mobile’ is closed to new replies.