- This topic has 11 replies, 6 voices, and was last updated 1 year, 7 months ago by
David.
-
AuthorPosts
-
March 2, 2016 at 3:40 am #176542
Fernando Díaz Gascón
Hello,
I have checked that if I align an image with the text, in right position, when I reduce the screen width size (from 768px and lower) the image is going aligned left by default. I would like to control the image alignment also in a screen width lower than 768px. (in this case I would like to have it centered) How can do it?
Thanks in advance!
You can see an example in http://congruentia.es.mialias.net/image-test/
To enter in the web:
user: congru203
pass: hq9tTxoWMarch 2, 2016 at 12:14 pm #176631Tom
Lead DeveloperLead DeveloperI agree that should be default – I’ve made that change to the next version of the theme.
For now, you can add this CSS:
@media (max-width: 768px) { .alignleft, .alignright { float: none; display: block; margin-left: auto; margin-right: auto; } }
Adding CSS: https://generatepress.com/knowledgebase/adding-css/
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentMarch 4, 2016 at 7:07 am #177010Fernando Díaz Gascón
Perfect! Thanks a lot.
March 4, 2016 at 10:58 am #177043Tom
Lead DeveloperLead DeveloperYou’re welcome 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentNovember 25, 2018 at 7:43 pm #739214Eric
I found this when searching how to align-right or align-left an image in mobile. My question is, what CSS would I enter so that the image does NOT center on devices less than 768px?
Currently, I have an image that is set to align right but it only works on the desktop. On mobile devices it is centered above the block of text.
Thanks,
Eric
http://www.ericsturgeon.comNovember 26, 2018 at 3:13 am #739549David
StaffCustomer SupportHi there,
try this CSS – but it will apply to all images that are alignright
@media (max-width: 768px) { .alignright { display: inline; float: right; margin-left: 1.5em; } }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/June 18, 2019 at 9:37 pm #934098Mark
I just started using Gutenberg block editor, but noticed that my images no longer center align on mobile view when creating a new site. Is this something that is being addressed? Or do i need to add CSS code again. I am running the latest versions of GP and WP.
June 19, 2019 at 4:43 am #934399David
StaffCustomer SupportHi there,
could you link us to your site so we can take a look? If need be raise a new topic where you can share your Site URL privately.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/June 19, 2019 at 5:18 pm #935260Mark
I am still creating this post and so it is not live yet. Especially not if the new block editor created post will not auto center align my smaller images in mobile view that are left aligned on desktop view. I do not have this problem with the classic editor.
June 20, 2019 at 3:44 am #935594David
StaffCustomer SupportGP doesn’t overwrite the block CSS styles – which currently doesn’t do anything for mobile image block alignment. If you want all left / right aligned images to center on mobile then you can add this CSS:
@media(max-width: 768px) { .wp-block-image .alignleft, .wp-block-image .alignright { float: none; margin-left: auto; margin-right: auto; } }
May want to reduce the max-width in the media query to suit.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/July 23, 2019 at 8:11 am #965139Simon
This was exactly what i needed. Thanks David.
No idea what the Gutenberg guys where thinking not making this default.
Cheers,
SimonJuly 29, 2019 at 1:29 am #969799David
StaffCustomer SupportGlad to be of help
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.