How can I make my image banner fullscreen on desktop with Dawn?

Store Design
, ,

Topic summary

A user wants to make their image banner display fullscreen on desktop in the Dawn theme, while ensuring content below the banner remains visible on the homepage.

Proposed Solution:
Another user provided a CSS code snippet to add to the theme’s base.css file:

  • Target: assets > base.css in the theme editor
  • The code uses a media query for screens 750px and wider
  • Sets minimum height to 100vh (viewport height) for the banner content
  • Applies specifically to desktop banner elements while excluding mobile variations

Status: The solution has been offered but not yet confirmed as tested or working by the original poster.

Summarized with AI on November 25. AI used: claude-sonnet-4-5-20250929.
1

Hi everybody,

Does anyone know how I can make the image banner totally full screen on desktop?

I would like for the content below the banner NOT to show when seeing my homepage.

My website: www.perzia.nl

Kind regards,

Perzia

2

@Perziamalayeri

Add this code at the bottom of Theme > Edit code> assets > base.css file

@media screen and (min-width: 750px) {
 .banner--large:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
     min-height: 100vh !important; 
  } 
 }

try it and let me know