Archived topic
Text not displaying well with image
5 replies · Started by Joe on January 26, 2021
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!
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%;
}
}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!
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%;
}
}I think that will work for now. I'll work around the problem on pages.
Thank you!
You're welcome
