Increase only mobile image banner height - Dawn

Technical Q&A
,
1

I have used a customisation code to hide my desktop image on mobile and vice versa. Now, I just want to increase the height of the image on my mobile view. When I add in a height definition in my CSS, it just increases the size of the image within it’s container. How can I change the height of the container itself?

2

It depends on what you’ve selected as the “Height” in section settings.
Ideally – share a (preview) link to the page in question.

Another option I’d recommend instead is to create 2 banner sections – one will hold a desktop image, another – mobile one.
Then add code like this into section “Custom CSS” setting:

For desktop image section – code to hide on mobile:

@media (max-width: 749px) {
  .banner {
    display: none;
  }
}

For mobile image section – code to hide on desktop:

@media (min-width: 750px) {
  .banner {
    display: none;
  }
}

This way you should be able to configure image height independently and use different images too.

if my post is helpful, please like it ♡ and mark as a solution -- this will help others find it
3

It has an option to set the height of the image in the slideshow.

Screenshot 2025-08-18 at 09.03.01
Screenshot 2025-08-18 at 09.03.012746×1474 361 KB

4

Hi CLSB2025.
In Dawn Theme, the banner height isn’t set directly with a CSS height property. Instead, it’s controlled by classes like .banner–small, .banner–medium, and .banner–large. These classes are automatically added based on the “Banner height” option you select in the Theme Customizer (Small / Medium / Large).

image
image2048×1067 212 KB

You can override this using Custom CSS in the theme editor (in the “Custom CSS” box you see in your screenshot) or by adding it to base.css. For example:

@media screen and (max-width: 749px) {
  /* Increase the banner height on mobile */
  .banner--large {
    min-height: 28rem !important; /* adjust as needed: 32rem, 400px, etc. */
  }

  .banner__media img {
    object-fit: cover;
    height: 100%;
    width: 100%;
  }
}

Or, if you’re using a theme other than Dawn, please share your store preview link and I’ll provide you with the appropriate custom CSS code.

Best regard,
Danny.

5

@CLSB2025 This may need to be carefully checked by seeing the container on your website? If available, could you please share the container page related URL for further inspection? Many thanks.