[Resolved] Text not wrapping around images on mobile devices

Home Forums Support [Resolved] Text not wrapping around images on mobile devices

Home Forums Support Text not wrapping around images on mobile devices

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #377857
    Wige T.

    Hi,

    I’m using GeneratePress on multiple websites (ideally I don’t want to share them publicly) and all of them have the same issue:

    For some reason text doesn’t wrap around left-aligned images on mobile devices. The size of the image doesn’t matter. The image and the text goes on separate rows.

    I’m pretty sure it worked out of the box on the latest site so it’s probably some setting I’ve changed that’s caused it.

    Any ideas on how I can troubleshoot this?

    Thanks!

    #377943
    Leo
    Staff
    Customer Support

    Hi there,

    Can you send a working site and non-working site through Account Issue here? https://generatepress.com/contact/

    Thanks!

    #378092
    Leo
    Staff
    Customer Support

    Thanks for the sending the links in.

    The one page worked because this CSS is added:

    @media only screen and (max-width: 767px) {
        figure.alignleft, img.alignleft, figure.alignright, img.alignright {
            float:none;
        }
    }
    #378190
    Wige T.

    Thanks for the follow-up, Leo.

    Unfortunately, I wasn’t clear. I have the same issue on all of my sites (including both examples I sent) and the code snippet above is just one of many tries to fix it. It doesn’t make any difference, the same issue persists.

    I don’t have a working example.

    #378353
    Leo
    Staff
    Customer Support

    Ahh I see. Try this CSS:

    @media (max-width: 768px) {
        .alignleft {
            float: left;
        }
        .alignright {
            float: right;
        }
    }
    #378357
    Wige T.

    That worked perfectly. I just added some padding to it as well:

    @media (max-width: 768px) {
        .alignleft {
            float: left;
            padding-right: 15px;
        }
        .alignright {
            float: right;
            padding-left: 15px;
        }
    }

    Thank you Leo!

    #378403
    Leo
    Staff
    Customer Support

    No problem!

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.