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
Explorer
119 17 19

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.
okocha21
Tourist
7 0 1

Hi, it's wonnky.com

 

EvinceDev
Shopify Partner
98 10 9

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 [email protected].
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.