- This topic has 18 replies, 3 voices, and was last updated 3 months, 1 week ago by
Bernhard.
-
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/
March 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 🙂
November 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; } }
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.
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.
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
March 27, 2021 at 11:22 am #1712339Bernhard
Great 🙂 ,
a few lines of code solve a big problem. Thank you, David.
Still in 2021 the Gutenberg developers have no valid image block.
I’m all time more convinced that it would be good to have an image block in Generateblocks. Most formatting problems can be solved with grid and containers, but not the image formatting problems.February 18, 2023 at 1:26 am #2537646Dan
Hi, I’m having a similar problem – a few of the images are not left aligning on mobile on this post, I can’t figure out why:
https://barcelonanavigator.com/barcelona-startups/
(for example, under the media subsection, the entry for Acqustic)
February 18, 2023 at 4:09 am #2537774David
StaffCustomer SupportHi there,
try adding this CSS:
.wp-block-image.alignleft { float: left; margin: .5em 1em .5em 0; }
-
AuthorPosts
- You must be logged in to reply to this topic.