- This topic has 9 replies, 2 voices, and was last updated 1 year ago by Leo.
March 26, 2020 at 3:44 pm #1211303Evan
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?
– EvanMarch 26, 2020 at 4:30 pm #1211318LeoStaffCustomer SupportMarch 27, 2020 at 10:45 am #1212256Evan
Sure, thanks man!
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.
– EvanMarch 27, 2020 at 11:32 am #1212294LeoStaffCustomer SupportMarch 27, 2020 at 2:57 pm #1212454Evan
Hey Leo –
Sure thing, I just disabled Autoptimize. Let me know what you see.
– EvanMarch 27, 2020 at 3:42 pm #1212462LeoStaffCustomer SupportMarch 27, 2020 at 3:50 pm #1212468Evan
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!
– EvanMarch 27, 2020 at 3:58 pm #1212472LeoStaffCustomer Support
I forgot to add media query:
https://generatepress.com/forums/topic/center-page-images-on-mobile-only/#post-1212462March 27, 2020 at 4:15 pm #1212487Evan
Worked! Went ahead and re-activated the autoptimize plugin.
Thanks for all your help.March 27, 2020 at 5:12 pm #1212508
- You must be logged in to reply to this topic.