How do I resize the image banner on mobile.

GinaB2
Tourist
8 0 1

I have two image banners that dont look correct on mobile. 

 

1) The first image is cut off. I have added this code to use a different image for mobile, as well as reduce the button size. However the image is still cut off. I want the image for mobile to be square- like 360 x360 px 

 

This is the code I have entered: 

 

.banner__media:first-child {
width: 100%;
}
.banner__media + .banner__media {
display: none;
}
@media screen and (max-width: 760px) {
.banner__media:first-child {
display: none;
}
.banner__media + .banner__media {
width: 100%;
display: block !important;
}
}
@media screen and (max-width: 760px) {
.banner--content-align-mobile-center .banner__buttons--multiple > * {
min-width: 4rem !important;
padding: 0 2.5rem !important;
}
}

 

Screenshot 2024-05-19 at 16.07.23.png

2) I want to also change the size of the image on mobile for this image banner as well. Its too small on mobile. I would also like it to be 360 x 360 px 

 

Screenshot 2024-05-19 at 16.09.56.png

If anyone can help- I would really appreciate it 🙂 

Replies 0 (0)