- This topic has 18 replies, 3 voices, and was last updated 1 year, 2 months ago by Bernhard.
-
AuthorPosts
-
March 2, 2016 at 3:40 am #176542Fernando 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 #176631TomLead 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ónPerfect! Thanks a lot.
March 4, 2016 at 10:58 am #177043TomLead DeveloperLead DeveloperYou’re welcome 🙂
November 25, 2018 at 7:43 pm #739214EricI 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 #739549DavidStaffCustomer 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 #934098MarkI 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 #934399DavidStaffCustomer 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 #935260MarkI 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 #935594DavidStaffCustomer 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 #965139SimonThis 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 #969799DavidStaffCustomer SupportGlad to be of help
March 27, 2021 at 11:22 am #1712339BernhardGreat 🙂 ,
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 #2537646DanHi, 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 #2537774DavidStaffCustomer 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.