How can I extend my image banner height on both computer and phone?

Store Design
, ,

Topic summary

Goal: make the image banner fill the entire screen on desktop and mobile in Shopify’s Dawn theme, removing bottom white space.

Context:

  • Store URL and password shared for review (shopdeepwell.com, habibi).
  • Initial screenshots showed extra white space, especially on mobile.

Proposed solutions:

  • One helper suggested adding custom code before in theme.liquid, but the actual snippet content was not visible in the post (result screenshot indicated a full-height banner on mobile).
  • Another helper provided a concrete CSS approach: add media queries in Assets > base.css to set the banner’s height close to the full viewport height (100vh) minus header space: mobile (max-width 990px) height: calc(100vh - 163px); desktop (min-width 991px) height: calc(100vh - 238px).

Latest development:

  • The store owner asked how to prevent the banner “zoom-in on scroll” effect.
  • Helper requested clarification on what exactly needs to be disabled.

Status: partial resolution. A CSS fix was provided to address white space/full-height. The zoom-on-scroll behavior remains open pending clarification.

Summarized with AI on January 15. AI used: gpt-5.
1

hello, im looking to extend my image banner both for computer and phone, as you can see below theres some white space on the bottom of the screen, same on phone but worse. Im trying to have my banner cover the entire screen when fire loading on the site. There is no section padding option on image banner

im using dawn theme, any help is greatly appreciated

deepwell_1-1697784508827.png
deepwell_1-1697784508827.png1920×924 266 KB

2

Hi @deepwell

Could you share your store link to check?

3

Hey @deepwell

Could you please provide your Store URL and, if applicable, the Password too? Your cooperation is greatly appreciated!

Best Regards,
Moeed

4

hi website is shopdeepwell.com

password is habibi

thank you

5

hi website is shopdeepwell.com

password is habibi

much appreciated

6

I don’t get the issue as you mention or maybe I missed understand your mean

Screenshot 2023-10-20 at 14.06.59.png
Screenshot 2023-10-20 at 14.06.59.png2114×912 248 KB

7

Hey @deepwell

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1697785984942.png
Moeed_0-1697785984942.png383×685 168 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

8

im to extend the orange image that shows when loading on to the website I’d like to make my website’s image banner cover the entire screen on both computers and phones. Currently, there is some white space at the bottom of the screen, which is more noticeable on mobile devices. I’m using the Dawn theme, and it seems there’s no option for adjusting section padding in the image banner.

deepwell_4-1697787131886.jpeg
deepwell_4-1697787131886.jpeg1179×2556 204 KB

9

im to extend the orange image that shows when loading on to the website I’d like to make my website’s image banner cover the entire screen on both computers and phones. Currently, there is some white space at the bottom of the screen, which is more noticeable on mobile devices. I’m using the Dawn theme, and it seems there’s no option for adjusting section padding in the image banner.

deepwell_5-1697787167614.jpeg
deepwell_5-1697787167614.jpeg1179×2556 204 KB

10

I got it, please add this code to Online store > Themes > Edit codes > Assets > base.css

@media screen and (max-width: 990px){
.banner { height: calc(100vh - 163px); }
}
@media screen and (min-width: 991px){
.banner { height: calc(100vh - 238px); }
}
11

thank you,is there any way to have it so it does not zoom in on scroll?

12

Could you explain a little more?