White box appears at bottom of screen when scrolling on mobile

Store Design
, ,
1

I am having trouble with a large white box appearing at the bottom of my site’s screen when you scroll down. It’s only happening on mobile and I’m not sure how to fix this

2

Hi @mementobuggirl

Could you please share your store URL and password (if it’s password protected) so we can check the issue?

Thank You

3

Hey @mementobuggirl Welcome to Shopify Community can you please share the Website URL

4

mementobuggirl.com !

5

yes it’s mementobuggirl.com !

6

Hey @mementobuggirl

Are you working on the duplicate theme?

The link you shared is opening the live theme, and we’re not seeing the white box at the bottom there.

Could you share a screenshot of the issue and the page URL where it’s showing up?

Thanks

7

I am working on the live theme since I did not notice the white bar until after publishing! It only happens on mobile. Not sure about other browsers, but the white bar is showing up on Safari and not showing up on Google chrome. Here’s a screenshot

IMG_3780
IMG_37801284×2637 463 KB

8

Okay, let me check @mementobuggirl

9

Hey @mementobuggirl

It happens while you scroll, it shows white space,

--PROBLEM

-- You have body class “<body class='gradient'>“ in the root it refer to color WHITE

–gradient-background: #ffffff;

and in the same base.css file you have

background-image: url(/cdn/shop/files/IMG_7355.png) !important; so before the image loads it shows the background-color → white,

-SOLUTION

1 :→ change the --gradient-background: #ffffff; to #a37891 or similar to background image
`2 : → change the background position/height so it can take all space (screen)

Thanks
Akshay

10

Hi @mementobuggirl

It’s a background image loading issue because of this: a white background sometimes appears, and the image loads late.

There are other issues also on you store. Like text is not visible on the Collection page when you click on the filter. check screenshot

image
image716×961 55.9 KB

11

@mementobuggirl

Just following up on this, that you don’t have to worry about the above reply anymore as I have already got it sorted out. :wink:

image
image347×751 39.7 KB

Cheers,
Moeed

12

Hi,

Hope this will help

  • Check for extra spacing in sections
  • Inspect the footer area
  • Look for min-height or height issues
  • Check for hidden elements still taking space
  • Use CSS

If you find the element causing it you can override it.

CSS Example

body, html {
  overflow-x: hidden;
}

.footer, .page-width {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

Or for a specific section:

CSS Example

.section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}
13

Thank you so much :slight_smile:

14

Thank you!! Where can I find the gradient background to change the color?

15

Unfortunately this didnt get rid of it. The box appears at the bottom of the page where Safari’s search bar is. When you scroll, the search bar goes away but the white box stays