Unwanted spacing/padding on home page in mobile view and misplaced button

Store Design
, , ,

Topic summary

A user reports spacing and layout issues on their homepage’s mobile view, specifically:

Problems identified:

  • Excessive padding/spacing appearing above and below the “new arrivals” section on mobile
  • Misplaced button in the same section
  • Site built using GemPages (not a standard Shopify theme)

Troubleshooting attempts:

  • One responder requested the store URL for direct inspection
  • Another provided CSS code targeting the .hero-banner-bg-parallax class with background-size: cover for mobile viewports

Current status:

  • The CSS solution partially reduced spacing but introduced a new problem: content sides are now cut off excessively
  • Issue remains unresolved and requires further adjustment
Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

When on desktop view my home page looks fine but when it’s on mobile view there is extra padding/spacing added to the top and bottom of the new arrivals section. How do I remove that? Also the button for this section is off on the mobile view. Thanks!

*Should state we didn’t use a Shopify theme but instead created it through (I believe)GemPages

IMG_0941.png
IMG_0941.png2360×1640 259 KB

1 Like
2

Hi @Briannasnow ,

Thank you for reaching out to the Shopify community. I’d be glad to assist you. Could you kindly share your store URL and
password (if it’s password-protected) so I can review it and provide you with an update?

3

Please add this code to Custom CSS of that section

@media (max-width: 749px) {
.hero-banner-bg-parallax { 
    background-size: cover;
}
}
4

It helps a bit with the extra space but then it cuts off the sides too much

IMG_0947.png
IMG_0947.png2360×1640 284 KB