Center Align Images on Mobile

[thedetoureffect]

thedetoureffect

December 14, 2021 at 11:19 am

Hi there, I know this has been asked before but none of the code I am finding from the forums is working. My left- and right-aligned photos look great on desktop but horrible on mobile. On mobile, text from the next paragraph wraps around the images awkwardly. It happens regardless of whether there is a caption on the image or not. Screenshots attached. I want these images centered on mobile.

I tried code that targets all left- or right-aligned images across the board, and that didn’t work. Then I tried targeting just individual images using special classes, that didn’t work. Some examples:

@media only screen and (max-width: 767px) {
.gibanica {
float:none;
display:block;
margin-left:auto;
margin-right:auto;
}
}

@media only screen and (max-width: 600px) {
figure.alignleft, img.alignleft, figure.alignright, img.alignright {
float:none;
display:block;
margin-left:auto;
margin-right:auto;
}
}

@media only screen and (max-width: 767px){
.wp-block-image img {
display: inline-block;
vertical-align: middle;
}
.wp-block-image img {
position: relative;
display: block;
width: 45%;
text-align: center;
margin-left: auto;
margin-right: auto;
}
}

In that last example I tried different widths and it would produce results as far as the size of the image, so it’s obviously targeting something relevant. But still it would never center it.

The only solution I’ve found is that if I put the image in the left side of a row block but center-align it, then put my paragraph text in the right side of the row block, then on mobile the image will be perfectly centered and stacked above the text. But this presents other issues because if the paragraph text is too long, it won’t wrap underneath the image on desktop view. So I have to delete half the text out of the row, then start a new paragraph block UNDER the row that finishes the paragraph. Sometimes this looks ok but other times you can clearly tell I broke the paragraph in half, especially on mobile.

I am migrating my site from Squarespace to WordPress so all of this is happening on my staging site, it is not live yet and I haven’t shifted my domain over. Could it just be an issue with the preview mode? I am testing it on my actual phone too. But maybe once my site actually goes live this won’t happen? I’d rather fix it before going live if possible, but if not possible then I guess I have to “wait and see”.

I don’t really want to post my URL for my staging site if I can help it since I am still migrating. Hopefully it’s unnecessary for me to post the secret URL.

• This topic was modified 4 years, 3 months ago by thedetoureffect. Reason: swapping out screenshot photo