Black Friday Sale! Get up to $40 off GP Premium!Learn more

[Resolved] Image alignment for mobile screens

Home Forums Support Image alignment for mobile screens

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #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: hq9tTxoW

    #176631
    Tom
    Lead Developer
    Lead Developer

    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/

    #177010
    Fernando Díaz Gascón

    Perfect! Thanks a lot.

    #177043
    Tom
    Lead Developer
    Lead Developer
    #739214
    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

    #739549
    David
    Staff
    Customer Support

    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;
        }
    }
    #934098
    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.

    #934399
    David
    Staff
    Customer Support

    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.

    #935260
    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.

    #935594
    David
    Staff
    Customer Support

    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.

    #965139
    Simon

    This was exactly what i needed. Thanks David.

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

    Cheers,
    Simon

    #969799
    David
    Staff
    Customer Support
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.