[Support request] Text not displaying well with image

[Joe]

This problem is on mobile. The desktop version is good.
In individual posts, some image is big and the text gets shrunk down to just a few characters per line.
Here is a screenshot from my phone.
https://photos.app.goo.gl/fBmp4ohUCqHPapcP7
a
The image float right. This is the way I want it on desktop.
Is there a way to make the text display after the image on mobile only?

Link to the post.
https://retireby40.org/worth-more-than-you-earned/

Thank you!

[David]

Hi there,

you can add this CSS to stop the images from floating on smaller screens:

@media(max-width: 768px) {
  .wp-block-image .alignright,
  .wp-block-image .alignleft{
    float: none;
    margin: unset;
    width: 100%;
  }
  .wp-block-image img {
    width: 100%;
  }
}

[Joe]

Hi David,
That fixed the individual post, but it messed up my front page.
Here are some images of the front page.

With code above – https://photos.app.goo.gl/AEzYw9V3B6gn48ZP8

Without code above – https://photos.app.goo.gl/4Hmq3Nfpe6YStjd28

Is there a way to limit the code to individual posts? Or put the front page on exception?

Thank you!

[David]

You can target just your single posts like so:

@media(max-width: 768px) {
  .single-post .wp-block-image .alignright,
  .single-post .wp-block-image .alignleft{
    float: none;
    margin: unset;
    width: 100%;
  }
  .single-post .wp-block-image img {
    width: 100%;
  }
}

[Joe]

I think that will work for now. I’ll work around the problem on pages.
Thank you!

[David]

You’re welcome

[Author]

Posts