How can I eliminate whitespace on my mobile pages?

Solved

How can I eliminate whitespace on my mobile pages?

drewhound
Excursionist
25 0 4

Hey All, 

 

How can I remove the whitespace on my mobile pages? 

 

As seen below. 

 

Any ideas let me know. Thank you. 

 

Screenshot_20231013_145743_Chrome.jpg

 

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

 

Accepted Solution (1)
Dan-From-Ryviu
Shopify Partner
8400 1652 1666

This is an accepted solution.

Sorry, my mistake, please update code like this 

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

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 7 (7)

Dan-From-Ryviu
Shopify Partner
8400 1652 1666

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

html { overflow-x: hidden; }

Screenshot 2023-10-16 at 15.18.07.png

 

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

drewhound
Excursionist
25 0 4

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

 

 

Dan-From-Ryviu
Shopify Partner
8400 1652 1666

This is an accepted solution.

Sorry, my mistake, please update code like this 

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

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

drewhound
Excursionist
25 0 4

Awesome, thank you, got it.

Dan-From-Ryviu
Shopify Partner
8400 1652 1666

You are very welcome, @drewhound 

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

Moeed
Shopify Partner
4309 1107 1356

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:

Moeed_0-1697444603542.png

 

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

 

Best Regards,
Moeed

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️

Don
Shopify Staff
2780 199 393

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!

Don | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog