[Resolved] styling images in gutenberg columns

Home Forums Support styling images in gutenberg columns

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #1028120
    Pauline

    Hello

    When my site is viewed in mobile view, after the Page Hero, there are 2 images, one under the other. The second image is offset to the right – I want to align the images neatly.

    I know this is because in desktop view, I have aligned the first image to the right, and the second to the left (which in desktop view looks fine).

    I have identified the image in the inspector as: img-wp-image-37. I have also given this image a class of .circleright

    The HTML appears as:

    <figure class=”alignleft”>
    </figure>

    I would really be grateful if you could give me the correct CSS syntax to budge this image in mobile view, as I’ve tried various combinations of CSS (all under the correct @media (max-width: 768px) heading, but have had no success.

    Many thanks,
    Pauline

    #1028121
    Pauline

    Sorry, I forgot to highlight the code (hence the pictures appeared). The html is:

    <div class="wp-block-image circleright"><figure class="alignleft"><img src="linktoimage.png" alt="" class="wp-image-37"/></figure></div>

    #1028341
    David
    Staff
    Customer Support

    Hi there,

    try adding this CSS:

    @media (max-width: 768px) {
        .wp-block-image .alignleft, .wp-block-image .alignright {
            float: none;
            margin-left: auto;
            margin-right: auto;
        }
    }
    #1028581
    Pauline

    Many thanks David – it worked 🙂

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