Archived topic
styling images in gutenberg columns
4 replies · Started by Pauline on October 7, 2019
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>
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
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>
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;
}
}Many thanks David - it worked :-)
Glad to be of help
