How to make the image banner full screen

Store Design

Topic summary

A user seeks to make their Dawn theme image banner full-screen on both desktop and mobile, as the built-in “Large” option is too small and “Adapt to first image” is too long.

Three solutions were proposed:

  1. CSS-only approach (tim_1): Add custom CSS to the banner section using .banner__media:before and .banner__content:before with height: 100vh to make the banner cover the entire viewport while cropping to match proportions.

  2. Mobile padding adjustment (yash141): Add padding: 10rem 1.5rem; inside the @media screen and (max-width: 749px) rule for mobile optimization.

  3. Theme file modification (vm-web): Edit sections/image-banner.liquid to add a custom class full-screen-banner, then add CSS in base.css with width: 100vw, height: 100vh, and object-fit: cover properties. Includes a mobile-specific media query using !important to prevent Shopify from squishing the banner.

Screenshots were shared showing the visual results. The discussion remains open with multiple viable approaches offered.

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

How to make the image banner full screen? Using Large is too small and adapt to first image is too long, needs to be full screen on mobile also (DAWN THEME).

website: https://luksuri.fi/

2 Likes
2

The way I see your site now, you can add this code, say in “Custom CSS” of this section:

.banner__media:before, 
.banner__content:before {
  height: 100vh;
  content: "";
}

This will make your banner cover entire screen and be cropped to match its proportions (but your image is pretty good for this).

Screenshot 2025-09-03 at 1.21.55 PM
Screenshot 2025-09-03 at 1.21.55 PM416Ă—874 165 KB

3

Just find the @media screen and (max-width: 749px) rule and add this inside it:

padding: 10rem 1.5rem;

@jorppa

4

image
image339Ă—567 42.8 KB

it is looking like this

5

@jorppa

Steps to Make Dawn Banner Full-Screen

  1. Go to Shopify Admin → Online Store → Themes → Dawn → Edit code.

  2. Open this file:

    sections/image-banner.liquid

  3. Find the wrapper <div> with the class banner. (Something like <div class="banner ...">).

  4. Add a custom class like full-screen-banner to it, e.g.:

    <div class="banner full-screen-banner ...">

  5. Now go to Assets → base.css (or theme.css , depending on Dawn version).

  6. Add this CSS at the bottom:

    /* Full-screen banner fix */
.full-screen-banner {
  width: 100vw;
  height: 100vh; /* full height of viewport */
  min-height: 100vh;
  max-height: 100vh;
}

.full-screen-banner img,
.full-screen-banner .banner__media {
  width: 100%;
  height: 100%;
  object-fit: cover; /* makes image cover full area */
}

On mobile, Shopify sometimes squishes the banner. Add this tweak:

@media screen and (max-width: 749px) {
  .full-screen-banner {
    height: 100vh !important;
  }
}