How do I remove the white space on the bottom of my mobile website?

I have been trying different codes for a while now, and I cannot seem to figure out how to remove the white space beneath my photo with the pink background. I looked at the other pages, and they seem to also have this issue. I attached the photo as a reference. This is a personal account.

PLEASE NOTE: This only pertains to when I look at it on my mobile. The desktop version is fine.

7 hours ago, caws_93 said:

I have been trying different codes for a while now, and I cannot seem to figure out how to remove the white space beneath my photo with the pink background. I looked at the other pages, and they seem to also have this issue. I attached the photo as a reference. This is a personal account.

PLEASE NOTE: This only pertains to when I look at it on my mobile. The desktop version is fine.

Can you share your URL so I can check it?

@caws_93 First of all, the white space appears on both desktop screens under 1670px width and mobile devices. Your page isn't creating a white space at the bottom; it's because you've used an image that scales with the screen size. On large desktop screens, it covers the full page height, but as the screen size scales down, a white space starts to show.

Instead of adding the image in an image block, use it as a section background.  After that, to ensure the section always covers the entire height of the screen without any white space at the bottom, you can add this code under Website > Pages > Website Tools > Custom CSS.

.page-section:first-child {
    min-height: 100vh !important;
}

5 hours ago, Beyondspace said:

Can you share your URL so I can check it?

Yeah, sure! The URL is in the photo, at the bottom, but I'll put it here: carloswagenersobrero.com

4 hours ago, Lesum said:

@caws_93 First of all, the white space appears on both desktop screens under 1670px width and mobile devices. Your page isn't creating a white space at the bottom; it's because you've used an image that scales with the screen size. On large desktop screens, it covers the full page height, but as the screen size scales down, a white space starts to show.

Instead of adding the image in an image block, use it as a section background.  After that, to ensure the section always covers the entire height of the screen without any white space at the bottom, you can add this code under Website > Pages > Website Tools > Custom CSS.

.page-section:first-child {
    min-height: 100vh !important;
}

 

Thank you for the suggestion. Before today, I had no idea you could use an image as a background.

I realize that I forgot to mention one other thing. The reason why I don't want to have the white space at the bottom is because I don't want people to scroll. I'm trying to create a mobile website where there is no need to scroll up or down. That's why I want to remove the white space.

8 minutes ago, caws_93 said:

Thank you for the suggestion. Before today, I had no idea you could use an image as a background.

 

I realize that I forgot to mention one other thing. The reason why I don't want to have the white space at the bottom is because I don't want people to scroll. I'm trying to create a mobile website where there is no need to scroll up or down. That's why I want to remove the white space.

 

 

I figured that you didn't want to have the option to scroll. 

8 minutes ago, caws_93 said:

Thank you for the suggestion. Before today, I had no idea you could use an image as a background.

 

I realize that I forgot to mention one other thing. The reason why I don't want to have the white space at the bottom is because I don't want people to scroll. I'm trying to create a mobile website where there is no need to scroll up or down. That's why I want to remove the white space.

 

 

I figured that you didn't want to have the option to scroll. 

8 minutes ago, caws_93 said:

Thank you for the suggestion. Before today, I had no idea you could use an image as a background.

 

I realize that I forgot to mention one other thing. The reason why I don't want to have the white space at the bottom is because I don't want people to scroll. I'm trying to create a mobile website where there is no need to scroll up or down. That's why I want to remove the white space.

 

 

I figured that you didn't want to have the option to scroll. 

19 minutes ago, Lesum said:

I figured that you didn't want to have the option to scroll. 

If you set the images as a background, I can provide a custom code solution to make the page non-scrollable

Okay, I changed it, it now has the image as the background.

@caws_93 You can now add this code under Website > Pages > Website Tools > Custom CSS

main .sections:first-child .page-section:first-child {
	height: 100vh !important;
	max-height: 100vh !important;
	padding: 0 !important;
	margin: 0 !important;
}

2 minutes ago, Lesum said:

@caws_93 You can now add this code under Website > Pages > Website Tools > Custom CSS

main .sections:first-child .page-section:first-child {
	height: 100vh !important;
	max-height: 100vh !important;
}

 

Thank you for the code. It's still scrolling.

I just updated the code. Try adding the updated code. 

3 minutes ago, Lesum said:

I just updated the code. Try adding the updated code. 

Just tried the new code, it still scrolls.

No worries if we can't get it done, I can modify my website to my needs.

It's not scrolling from my end. refresh and check the live site again. Thanks!

Hmmmmm, it must be my phone. I have an iPhone 12 Pro...

Thanks @Lesum

Just now, Lesum said:

It's not scrolling from my end. refresh and check the live site again. Thanks!

29 minutes ago, caws_93 said:

Hmmmmm, it must be my phone. I have an iPhone 12 Pro...

 

Thanks @Lesum

 

I just checked it on my iPhone 14 Pro Max and it's good to go.

@caws_93 Can you also add this code

html, body {
  margin: 0; 
  height: 100%; 
  overflow: hidden;
}
::-webkit-scrollbar {
  display: none;
}

1 hour ago, Lesum said:

@caws_93 Can you also add this code

html, body {
  margin: 0; 
  height: 100%; 
  overflow: hidden;
}
::-webkit-scrollbar {
  display: none;
}

 

THAT DID THE TRICK! Thank you SO much @Lesum , I actually like it more without the scroll option.