How could we change image banner height Only on desktop version? - Dawn theme

[Jim3]

only on desktop version

[MandasaTech]

Hello @Jim3 

To change the image banner height only on desktop in the Dawn theme, you’ll need to use a media query in your custom CSS to target desktop screen sizes.

Here’s a step-by-step (Guide + Code):

Steps to Add Custom CSS in Dawn Theme:

1. Go to Online Store > Themes > Customize

2. In the theme editor, click the three-dot menu (⋮) in the top-left and choose "Edit code"

3. Open the file:
   Assets > base.css (or theme.css in older versions)

4. Scroll to the bottom and paste the following code:

CSS to Adjust Banner Height Only on Desktop

/* Desktop-specific banner height */
@media screen and (min-width: 1024px) {
  .banner, .banner__media {
    height: 500px !important; /* Change this to your desired height */
    max-height: 500px !important;
    object-fit: cover;
  }
}

You can adjust the 500px to any height that works best for your design.

Optional: Target a Specific Banner Section

If you only want to apply this to a specific banner, inspect it in your browser and look for a unique section ID like:

<section id="shopify-section-template--123456789__banner">

Then update the CSS like this:

@media screen and (min-width: 1024px) {
  #shopify-section-template--123456789__banner .banner__media {
    height: 600px !important;
  }
}

Let me know if you want to:

• Target mobile height separately

• Apply different styles to multiple banners

• Or want help locating the exact section ID

[Jim3]

Thank you for your reply! Unfortunately when I applied the code, this was the outcome on the sreenshot below:

It left this grey empty space

[Dotsquares]

Hi @Jim3  👋

To change the image banner height only on the desktop version for the Dawn theme, you can easily do this using CSS media queries. Here’s a quick solution you can try:

1. Go to Online Store → Themes → Customize

2. Click on Theme settings → Custom CSS (or alternatively, add in your theme’s CSS/SCSS file)

Add the following code:

@media screen and (min-width: 1024px) {
.banner__media {
height: 500px !important; /* Adjust the height as per your requirement */
object-fit: cover; /* Optional: ensures image covers the area nicely */
}
}

• This will apply the new banner height only on desktop devices (screen width 1024px and above).

• You can adjust the height value (500px) to whatever suits your design.

Hope this helps! 😊 Let me know if you need help with mobile-specific adjustments too.

Regards,

[amilla]

Hi, Jim!

You need to apply CSS code under Custom CSS settings under the Image Banner section:

[namphan]

Hi @Jim3,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

@media screen and (min-width: 750px) {
    .banner {
        min-height: 450px !important;
    }
}