Mobile View Remove extra space

Store Design

Topic summary

A user is experiencing excessive white space on their mobile site view, despite successfully removing it from the desktop homepage to create a single-page, no-scroll layout. The mobile version doesn’t match this streamlined design.

Issue Details:

  • Desktop homepage optimized (single page, no scroll)
  • Mobile view shows unwanted extra space
  • User also mentions difficulty hiding a promo popup

Resolution:
After the user shared their store URL (calcionino.com) and password, a community member provided a CSS solution:

  • Add custom CSS code to the theme’s stylesheet (base.css, style.css, or theme.css)
  • The code targets the banner media element specifically for mobile screens (max-width: 749px)
  • Sets banner height to 85vh to eliminate excess space

A screenshot was provided showing the expected result after implementing the fix. The solution appears to address the mobile spacing issue directly.

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

I am unable to hide the promo pop up, i have managed to remove excess space on my homepage, it is now just one page and no scroll. However in mobile view i have all this excess space and i want it to mimic the homepage, can someone please assist me

1 Like
2

photo attached

3

Hi @calcionino ,

Please share the store url.

4

https://calcionino.com

5

HI @calcionino

PLease, share your store URL with password. Thanks!

6

rossi46

7

https://calcionino.com
rossi46

8

Thanks for the info, try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media only screen and (max-width: 749px){
div#Banner-template--24159466586397__image_banner_txrpph .banner__media.media {
     height: 85vh;
}
}

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!