Archived topic
Post image position on mobiles
7 replies · Started by Graham on June 27, 2015
I made some posts in my new blog and had left-aligned images, with the text flowing around them.
When I checked them on my mobile, the images were floating above the text as I expected, but they were left-aligned and there was no white space below them.
After many unsuccessful attempts to centre the images, I finally did it by setting the margins to auto. I also added 10px of padding beneath them, so the text wasn't touching them.
Thought I'd share the code here in case others would like to use it. I put it in my child theme style.css
/* Aligning images in posts on mobiles */
@media (max-width: 768px) {
.alignleft,
.alignright {
float: none;
display: block;
margin-left: auto;
margin-right: auto;
padding-bottom: 10px;
}
}Makes things much prettier I think.
Thanks for posting! Thought this was done by default, will definitely add it into the theme :)
Hello,
did this went into the standard code? On my sites the images in mobile view are still left aligned on top of post body/excerpt.
Is this a technical need or why can't they have the same alignment as in desktop version?
Best wishes
Daniel
Hi Daniel,
There's typically not enough room on mobile to keep the image floating left, so they shift to have their own row and should center.
Is that not happening for you?
Hello Tom,
yes it works with the code above.
I have a special blog page with deactivated featured image and allow some html in excerpt: http://notenschluessel-lev.de/aktuelles/
What I wanted was to center the images there, but not in the post itself?
Best wishes
Daniel
You could try something like this:
.masonry-post .entry-summary img {
display: block;
margin-left: auto;
margin-right: auto;
}Yes, that worked better. Thanks a lot!
You're welcome :)