Change size of image ONLY on mobile

Store Design
1

Hi there,

I’d love to be able to customise the size of the wave graphic I have added as a banner above my footer on mobile vs desktop. At the moment, the graphic is too big on desktop and way too small on mobile. Can anyone help me with some CSS to fix this? Thanks so much!

IMG_1251.PNG
IMG_1251.PNG1206×2622 317 KB

Screenshot 2026-01-15 at 10.53.10 p.m.
Screenshot 2026-01-15 at 10.53.10 p.m.1920×1895 322 KB

3

Hi @peterotoole,

1. Go to Online Store → Theme → Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

.banner__media.media {
    height: 180px !important;
}
@media screen and (max-width: 950px) {
  .banner__media.media {
    height: 100px !important; 
  }
}

Hope this helps! If yes then Please don’t forget hit Like and Mark it as solution!

4

Hey @peterotoole!

In order to provide you the customization options to increase the size of the wave image within the Shopify theme customizer, requires to add the schema markup and liquid coding which make this part hard without store access or theme code access.

This is why custom coding is the solution to increase or decrease the size of a wave image.

You need to follow these steps to increase or decrease the size of the wave image.

Go to Shopify Admin >> Online Store >> Edit Code >> base.css

In the end of base.css you need to paste the following code that shared below.

.banner.banner--content-align-center.banner--content-align-mobile-center.banner--adapt.banner--adapt.banner--mobile-bottom {
 height: 80px !important;
}
@media only screen and (max-width: 767px) {
 .banner.banner--content-align-center.banner--content-align-mobile-center.banner--adapt.banner--adapt.banner--mobile-bottom {
 height: 40px !important;
}
}

Results (Desktop):

image
image1906×948 76 KB

Results (Mobile):

image
image364×621 20.3 KB

Hope this helps.

5

Hi there,

Thanks so much for the reply. I can’t get this to work on my end however for whatever reason?!

6

Can you please tell me where you facing issue to put the code provide by me?

7

at the very bottom of base.css

8

Screenshot 2026-01-16 at 9.44.35 a.m.
Screenshot 2026-01-16 at 9.44.35 a.m.2700×936 302 KB

9

Yes, you’ve put the code in the correct file. And I can see it’s currently working well for both desktop and mobile. Can you let me know which issue you still facing?

10

Is this what you are seeing for mobile and desktop below?

I need to the mobile version to be bigger and the desktop version to be smaller than these?

Thanks for your help!

Screenshot 2026-01-16 at 9.56.50 a.m.
Screenshot 2026-01-16 at 9.56.50 a.m.1070×1208 217 KB

Screenshot 2026-01-16 at 9.57.07 a.m.
Screenshot 2026-01-16 at 9.57.07 a.m.1920×1250 265 KB

11

In this case, you need to remove the code that you put into the base.css file and you need to replace with this one.

.banner.banner--content-align-center.banner--content-align-mobile-center.banner--adapt.banner--adapt.banner--mobile-bottom {
 height: 60px !important;
}
@media only screen and (max-width: 767px) {
 .banner.banner--content-align-center.banner--content-align-mobile-center.banner--adapt.banner--adapt.banner--mobile-bottom {
 height: 70px !important;
}
}

Once you put that code and let me know, if this works for you!

12

I see you changed the height in the code there. I also tried changing the height but it’s actually doing anything on the site for whatever reason. No matter what number i put in here the image stays the same size?

13

Can you tell me what changing it’s made after you put the code that I provide you. This maybe happens due to the global classes css.

14

After I place the code, nothing changes at all across either the desktop or mobile. The code doesn’t seem to have any affect what so ever on the image. :face_with_spiral_eyes:

15

Can you please grant me collab access so that I can check by myself. There might be issue with the overriding.

You can share the collab code in the p/m.