Site logo

Archived topic

Mobile Image Size

5 replies · Started by Forum User on February 6, 2022

Viewing posts 1–6 of 6

Hi there,

if you want to limit the width of that specific image then:

1. Select the Image Block. In Advanced > Additional CSS Class(es) add: small-image

2. Then add this CSS:

@media(max-width: 768px) {
    .wp-block-image.small-image img {
        max-width: 150px;
    }
    .wp-block-image.small-image figure {
         text-align: center;
    }
}

Where exactly do I put the CSS? In the customizer > additional CSS ?

Some of my images, including this one, need to be left aligned.

This is what is there now

@media(max-width: 500px) {
  .wp-block-image .alignleft,
  .wp-block-image .alignleft img {
    float: none;
    width: 100%

Yes it goes in the Additional CSS, you can add it before your current CSS.

Thanks David!

You're welcome

This archived topic is closed to new replies.