Wanting help to change height of hero banner on desktop

Store Design
1

  1. Theme is Dawn 15.4.1

  2. Goal : to change the height of hero banner on desktop but leave as is on mobile

  3. FIle : section/

    image-banner.liquid

2

Hey @JustPrecuts

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

3

Thank you, it is www.justprecuts.com.au

4

Hey @JustPrecuts

Add this code in the Custom CSS option in the hero section of your theme editor.

@media screen and (min-width: 768px) {
.banner {
    height: 90% !important;
}
}

NOTE: You can increase or decrease that 90% value to adjust your banner height and it will only affect your desktop version.

RESULT:

image
image1901Ă—917 450 KB

Hope that helps! If it did, a Like and Marking it as Solution goes a long way and helps others find the fix faster too.

Best,
Moeed

5

Thank you but sadly no change to desktop. AI and shopify live agent could not get this to work, I really appreciate any help you can offer

6

@JustPrecuts to adjust a bit what Moeed said, code is

@media screen and (min-width: 768px) {
    .banner .banner__media {
        height: 90% !important;
    }
}

But note it is a bit difficult with all that text on image. You should try alternative image with left side clean and put text in banner title and text and most importantly add a button to lead your customers “straight to the fun part” :slight_smile:

Or make whole image clickable, as I assure you if you had some session tracker you would see that customer are most likely trying to click on that banner and continue with shopping.

7

Hello @JustPrecuts
You can achieve this by adding the following code to sections/image-banner.liquid immediately before the {% schema %} tag:

{% style %}
  @media screen and (min-width: 750px) {
    #Banner-{{ section.id }} {
      height: 500px !important;
      min-height: 500px !important;
    }

    #Banner-{{ section.id }}::before,
    #Banner-{{ section.id }} .banner__media::before {
      padding-bottom: 0 !important;
    }
  }
{% endstyle %}

Simply replace both 500px values with your preferred desktop height.

Since the media query only applies to screens 750px and wider, your mobile banner height will remain unchanged. The pseudo-element override also ensures this works when the banner height is set to “Adapt to image.”

Before making any code changes, I’d also recommend duplicating your theme so you have a backup if needed.

Additionally, if you’re planning to create more advanced hero banners, responsive sliders, or animated sections in the future, you might want to check out Slider Revolution & Sections. It lets you build responsive banners with separate desktop/mobile settings, animations, and a drag-and-drop editor—so you can make these kinds of design changes without editing theme code.

Hope this helps!

8

Hi @JustPrecuts,

Go to online store > edit code
In assets folder open base.css file
At the bottom of this file paste this code:

@media screen and (min-width: 750px) {

  .banner {
    min-height: 450px !important;
  }
}

@media screen and (max-width: 749px) {

  .banner {

    min-height: auto !important;

  }
  .banner__media {
    position: relative !important;
  }
}

Save.

11

Found this while browsing and wanted to add my two cents. If the suggested CSS changes aren’t working, it might be helpful to check for any JavaScript that could be overriding your styles. Also, sometimes clearing the browser cache can reflect recent changes better. Anyone has alternative ideas or faced similar issues with the Dawn theme?