- This topic has 9 replies, 2 voices, and was last updated 1 year ago by
Leo.
-
AuthorPosts
-
March 26, 2020 at 3:44 pm #1211303
Evan
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
March 26, 2020 at 4:30 pm #1211318Leo
StaffCustomer SupportHi there,
Can you guide me to the page in question so I can see the issue?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/March 27, 2020 at 10:45 am #1212256Evan
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
March 27, 2020 at 11:32 am #1212294Leo
StaffCustomer SupportAny chance you can disable Autopimize so I can have a closer look at the source?
Thanks.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/March 27, 2020 at 2:57 pm #1212454Evan
Hey Leo –
Sure thing, I just disabled Autoptimize. Let me know what you see.
Thanks!
– Evan
March 27, 2020 at 3:42 pm #1212462Leo
StaffCustomer SupportHmm give this CSS a shot:
@media (max-width: 768px) { .wp-block-image .alignleft { display: block; float: none; margin-right: 0; text-align: center; } }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/March 27, 2020 at 3:50 pm #1212468Evan
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
March 27, 2020 at 3:58 pm #1212472Leo
StaffCustomer SupportI forgot to add media query:
https://generatepress.com/forums/topic/center-page-images-on-mobile-only/#post-1212462Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/March 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 #1212508Leo
StaffCustomer SupportNo problem 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.