Archived topic
Center page images on mobile only
9 replies · Started by Evan on March 26, 2020
Hi!
I have a quick question. I'm building a page with a left-aligned image with text wrapping around it. On desktop, this looks great.
On mobile, however, the image displays off-center to the left, but the text is below due to screen size, which makes the image look off.
Is there any CSS or quick fix to have an image on a specific page align center for mobile and left for desktop?
Thanks!
- Evan
Hi there,
Can you guide me to the page in question so I can see the issue?
Sure, thanks man!
It's - https://www.evantarver.com/about/
The issue is on desktop, you see that it's left-aligned with the text wrapped around it.
On mobile, however, bc of the screen size, the image displays above with the text below it, but since it's left-aligned it looks off-center on mobile.
I like how the layout looks on mobile, I just want to figure out how to center the image while still allowing it to be left-aligned with text wrapping on desktop.
- Evan
Any chance you can disable Autopimize so I can have a closer look at the source?
Thanks.
Hey Leo -
Sure thing, I just disabled Autoptimize. Let me know what you see.
Thanks!
- Evan
Hmm give this CSS a shot:
@media (max-width: 768px) {
.wp-block-image .alignleft {
display: block;
float: none;
margin-right: 0;
text-align: center;
}
}Thanks Leo!
Hm, so when I add that CSS it fixes the issue on mobile, but then it makes the desktop version align center to match the mobile.
Ideally, there would be a way to align left on desktop, but align center on mobile, or have the left-aligned image auto-center on mobile given it formats to the screen size.
If you have any other thoughts would love to hear it!
- Evan
I forgot to add media query:
https://generatepress.com/forums/topic/center-page-images-on-mobile-only/#post-1212462
Worked! Went ahead and re-activated the autoptimize plugin.
Thanks for all your help.
No problem :)
