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

Hi @Jim3 :waving_hand:

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! :blush: Let me know if you need help with mobile-specific adjustments too.

Regards,