Image text wrapping on mobile phones

  • Hi,

    If I put medium-sized images in my posts they are wrapped with text quite awkwardly on mobile phones. Sometimes it’s just a column of letters on one side. I think I need all the images had no wrapping if viewed on mobile phones. I remember with a previous them I found this code and it solved the problem:

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

    However, it doesn’t see to work now. Is theer any way to achieve it?

    • This topic was modified 5 years, 8 months ago by rainmanne.
Viewing 12 replies - 1 through 12 (of 12 total)

  • Hello,

    Can you share your site link so that I can check it?

    Thread Starter rainmanne

    (@rainmanne)

    https://www.sugidama.co.uk/sake-events/sake-workshop-at-ichiba-london/

    Try to use this code and check it works or not – 

    @media only screen and (max-width: 767px) { {
.wp-block-image .aligncenter, .wp-block-image .alignleft, .wp-block-image .alignright, .wp-block-image.is-resized {
    margin: 0 auto;
}
}
    Thread Starter rainmanne

    (@rainmanne)

    Hi Amit, thanks a lot for the response. It gives me errors when I try to paste it into Custom CSS:

    Expected RBRACE at line 8, col 45
Unexpected token '{' at line 8, col 45

    both in the first line of the code and

    Unexpected token '{' at line 12, col 1.
    in the last line of the code

    • This reply was modified 5 years, 8 months ago by rainmanne.

    Sorry for the mistake. Use this one – 

    @media only screen and (max-width: 767px) {
.wp-block-image .aligncenter, .wp-block-image .alignleft, .wp-block-image .alignright, .wp-block-image.is-resized {
    margin: 0 auto;
}
}
    Thread Starter rainmanne

    (@rainmanne)

    Hi Amit, unfortunately it does not fix it ??

    Thread Starter rainmanne

    (@rainmanne)

    Doesn’t look like I can attach a screenshot.

    Hi,
    I am having this problem also so I hope that it’s okay if I also add something.

    Here is a screenshot of it doing it on my site:
    https://www.dropbox.com/s/x9iev31i5gpmi0y/Screenshot_20190329-132701.png?dl=0

    I was doing some researching and it looks like there is something called srcset that you can make extra sizes of an image and Word Press will automatically choose the best one for your site.

    But on an old site of mine I never did that and it just resized the images instead of making them an absolute size. Is there a way to tell the images to automatically scale to best fit the screen it’s on?

    I don’t know if this would fix rainmanne’s issue also, but I was going to ask about this same issue.

    Thanks

    Thread Starter rainmanne

    (@rainmanne)

    Yes, it looks like the same issue.

    Try to use the below code instead of the previous one. Clear cache after adding the code to view the changes – 

    @media only screen and (max-width: 580px) {
.wp-block-image .aligncenter, .wp-block-image .alignleft, .wp-block-image .alignright, .wp-block-image.is-resized {
    margin: 0 auto;
    float: none;
}
}
    • This reply was modified 5 years, 8 months ago by Amit Singh.
    Thread Starter rainmanne

    (@rainmanne)

    This worked! Thanks a lot, Amit!

    You’re welcome!

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Image text wrapping on mobile phones’ is closed to new replies.