Archived topic

Text not wrapping around images on mobile devices

6 replies · Started by Victor on September 2, 2017

Viewing posts 1–7 of 7

September 2, 2017 at 7:51 am #377857

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!

September 2, 2017 at 10:32 am #377943

Hi there,

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

Thanks!

September 2, 2017 at 5:47 pm #378092

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;
    }
}

September 3, 2017 at 1:14 am #378190

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.

September 3, 2017 at 9:09 am #378353

Ahh I see. Try this CSS:

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

September 3, 2017 at 9:16 am #378357

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!

September 3, 2017 at 10:50 am #378403

No problem!

This archived topic is closed to new replies.

Start building better websites today.