How to make first image banner longer in Dawn Theme

Store Design
,

Topic summary

A user seeks to extend the image banner height on mobile devices in the Dawn theme, as it currently only covers about half the mobile screen. They want it to occupy most or all of the initial mobile viewport.

Proposed Solutions:

Two respondents provided CSS code snippets to address this:

  • Solution 1: Modify theme.css with a media query targeting screens up to 640px width, adjusting grid item width to 90% and margin to 0
  • Solution 2: Edit Base.css through the theme code editor, using a media query for screens up to 749px width, setting a minimum height of 70rem on banner content elements

Both solutions use @media queries to apply mobile-specific styling. The user is advised to add the appropriate CSS code to their theme files to achieve the desired banner extension on mobile views.

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

Hi

I want to make image banner longer on mobile view, cause at the moment it covers like half of the mobile screen view. I want to make it cover most of the first mobile view or if it’s possible whole, if the photo size is not apropriate let me also know.

Thank you in advance

Shop URL: https://60338a.myshopify.com/

how to 12.jpg
how to 12.jpg495×911 54 KB

2

Hey

Please use this code in theme.css file:

@media screen and (max-width: 640px){
.slider–tablet.grid–peek.grid–2-col-tablet-down .grid__item, .grid–peek .grid__item {
width: 90%;
max-width: 90%;
margin: 0;
}
}

Thank you
Pooja D.

3

Hi @UL1

This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:
Online Store ->Theme ->Edit code
Assets ->Base.css

@media screen and (max-width: 749px){
.banner--large:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
    min-height: 70rem !important;
}
}

Hope you find my answer helpful!
Best regards,
Richard | PageFly

1 Like