Archived topic
Mobile Image Size
5 replies · Started by Forum User on February 6, 2022
The following image https://www.tryhypnosisnow.com/wp-content/uploads/2022/02/Scroll-Down-to-Receive-50-OFF.webp looks extremely large on my mobile site as compared to my desktop site https://www.tryhypnosisnow.com/?
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