How to fix whitespace on pages

[drewhound]

Hey All, 

How can I remove the whitespace on my mobile pages? 

As seen below. 

Any ideas let me know. Thank you. 

Site is:  www.blackhoundsports.com/pages/partner-shop

[Dan-From-Ryviu]

Please add this code to your theme.iquid file before </head> tag in Online store > Themes > Edit code 

html { overflow-x: hidden; }

 

[drewhound]

No Luck, there is still huge white space when you scroll to the side? 

[Dan-From-Ryviu · Accepted solution]

Sorry, my mistake, please update code like this 

<style>
html { overflow-x: hidden; }
</style>

[drewhound]

Awesome, thank you, got it.

[Dan-From-Ryviu]

You are very welcome, @drewhound 

[Moeed]

Hey @drewhound 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the top of the file above </head> tag

<style>
html {
    overflow-x: hidden !important;
}
</style>

RESULT:

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

Best Regards,
Moeed

[Don]

Hi there @drewhound!

I can see you've already gotten some feedback and coding advice from the Community here, that's great!

That said, we would generally advise against removing whitespace for design reasons.

Whitespace lets content breathe, creates emphasis around calls to action, and lets users see key information, as it stands out from surrounding content.

Based on Human Factor International’s research, white space helps increase the comprehension factor by nearly 20%.

Added white space gives emphasis to your call-to-action buttons and key information. White space lets your visitors breathe and appreciate the website better since things are laid out well and easy to spot. 

There's more info on this external website you can check out here. 

It is ultimately the responsibility of the merchant to decide how to run their business, so if you're happy to continue with the changes you have made then feel free to disregard this advice.

All the best!