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

Store Design
, ,

Topic summary

A user seeks to modify image banner height exclusively for desktop view in Shopify’s Dawn theme, while keeping mobile dimensions unchanged.

Primary Solution Approach:

  • Add custom CSS using media queries targeting desktop screens (min-width: 1024px or 750px)
  • Insert code into base.css or theme.css file via theme editor
  • Target .banner and .banner__media classes with specific height values (e.g., 500px)
  • Use object-fit: cover to maintain proper image scaling

Implementation Issue:
When the user applied the suggested code, an unwanted grey empty space appeared below the banner, indicating the solution needs adjustment.

Alternative Suggestions:

  • Apply CSS directly to Custom CSS settings within the Image Banner section settings (rather than global CSS file)
  • Target specific banner sections using unique section IDs for more precise control
  • Adjust min-height property instead of fixed height

Status: The discussion remains open as the initial solution created layout issues requiring troubleshooting.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
2

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

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

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

  3. 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

1 Like