styling images in gutenberg columns

[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

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

[David]

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;
    }
}

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

[Pauline]

Many thanks David – it worked 🙂

[David]

Glad to be of help

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

[Author]

Posts