Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: How can i reduce the width of my website on mobile

How can i reduce the width of my website on mobile

okocha21
Tourist
7 0 1

I have an issue on mobile, the width of my website is not the same as my mobile screen. I can always scroll a bit to the right and it doesn't look good. 

 

I added a code that i saw on a discussion and it solved the problem, but it caused my header to stay at the top of my website, but not when i scrolled down. 

 

Is there a code i could use the solve these issues ? 

Replies 4 (4)

steve_michael2
Trailblazer
190 22 25

Hi  @okocha21 , kindly provide your store URL please and if it is password protected, please share the password as well. Thanks

Crafting exceptional online experiences with innovative design and technology.

Try Big Bulk Discount To Boost Your Store Sales with Volume/Tier Discount
okocha21
Tourist
7 0 1

Hi, it's wonnky.com

 

EvinceDev
Shopify Partner
121 13 13

Hello @okocha21 , Try this code add this in your css file - base.css, or style.css

body, html {
  overflow-x: hidden; /* Prevents horizontal scroll */
  width: 100%; /* Sets width to device width */
}
Shopify Theme Advanced Backend Developer and Debugger
Want to modify or develop new app, Hire us.
If our Answer is helpful then please Like and Accept Solution!
I am an eCommerce and Marketing Technology consultant based in India.
To inquire about consulting work availability, You can reach me on Skype by live: rahul.evince or mail on partners@evincedev.com.
Shopify Apps URL :- https://apps.shopify.com/partners/gemfind1
Customization on Shopify Theme | Shopify App Development | SEO & Digital Marketing
okocha21
Tourist
7 0 1

Thanks, it does resolve the width issue, but it creates another issue with my header which doesn't sticks to the top of the screen as i scroll down, even though it is activated to always stay fixed at the top. 

 

I'll let the code like this for now, so you can see by yourself.