[Resolved] Image alignment for mobile screens

[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: hq9tTxoW

[Tom]

I 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-development

[Fernando Díaz Gascón]

Perfect! Thanks a lot.

[Tom]

You’re welcome 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Eric]

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.com

[David]

Hi 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/

[Mark]

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.

[David]

Hi 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/

[Mark]

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.

[David]

GP 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/

[Simon]

This was exactly what i needed. Thanks David.

No idea what the Gutenberg guys where thinking not making this default.

Cheers,
Simon

[David]

Glad to be of help

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Bernhard]

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.

[Author]

Posts