Post image position on mobiles

[Graham]

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.

[Tom]

Thanks for posting! Thought this was done by default, will definitely add it into the theme 🙂

[xdaniel]

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

[Tom]

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?

[xdaniel]

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

[Tom]

You could try something like this:

.masonry-post .entry-summary img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

[xdaniel]

Yes, that worked better. Thanks a lot!

[Tom]

You’re welcome 🙂

[Author]

Posts