How To Change Image Banner Size For Mobile?

Store Design
, ,

Topic summary

A user wants to customize the height of a mobile-specific banner image independently from the desktop version. They’re already using CSS to display different images on desktop versus mobile.

Solutions Provided:

  • Primary approach: Add custom CSS code to the theme.liquid file, just above the </body> tag. Multiple contributors confirmed this method works.

  • Alternative location: The CSS can also be added to the Custom CSS section within the Image Banner settings in the theme editor.

  • Reference link: A community thread addressing similar desktop/mobile banner separation was shared.

Current Issue:

The original poster reports the code isn’t working when placed in the Custom CSS field of the image banner section. They shared a screenshot showing the code snippet:

.banner-image-separate-mobile .banner__media {
  @media screen and (max-width: 749px) {
    min-height: 110rem !important;
  }
}

The discussion remains open as the user seeks clarification on why their implementation isn’t functioning as expected.

Summarized with AI on November 20. AI used: claude-sonnet-4-5-20250929.
1

I use code to make the image show different on desktop and mobile first image is show on desktop, second image is show on mobile.

Shawn512_0-1685422600962.png
Shawn512_0-1685422600962.png341×1055 95.6 KB

But, how to customize the #2 image’s height independently ?

Thanks a lot.

My store url: julibees.com

2

Hey @Shawn512

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above tag.

Capture.JPG
Capture.JPG264×465 27.2 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
3

Thanks for your reply.

Can I use this code in the Theme Edit > Banner Image> Custom CSS

4

Hello @Shawn512

Refer this link: It will be helpful to you -

https://community.shopify.com/topic/2067013

5

Yes of course! You can use this code in any CSS file.

If this helps you out then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
6 
.banner-image-separate-mobile .banner__media {
  @media screen and (max-width: 749px) {

this is the correct code btw.

Thanks a lot

7

Shawn512_0-1685431970824.png
Shawn512_0-1685431970824.png552×766 309 KB

:joy: dont know why

It doesnt work

I put this code to the Custom CSS of the image banner:

.banner-image-separate-mobile .banner__media { @media screen and (max-width: 749px) {.banner--large:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content{}
min-height: 110rem !important; }｝
8

Hi @Shawn512 ,

This is Henry at PageFly - Shopify Advanced Page Builder app.

You can try this code by following these steps:

Go to Online store => themes => actions => edit code and add this code on file theme.liquid before tag

PageFlyHenry_0-1685434891235.png
PageFlyHenry_0-1685434891235.png1600×794 139 KB

Hope this answer helps.

Best regards,

Henry | PageFly