Mobile Website Horizontal Play/Scroll

[LeandroS]

Hello

I am looking for help for my shopify Website (mobile only).

I Rearranged my burger menu and cart icon to be more on the edge of the screen.

since then i have the problem with my mobile side having horizontal play/scroll. it seems that the website is slightly zoomed in (after zooming out it doesn't happen anymore) I think its because of overflow or something..

I know its because of the code, because after i removed it the scroll was away. 

Can anyone help me?

I would really appreciate it!

Website: www.gogghi.ch

Password: GOGGHI10NEWWEBSITE2025

Here the video Link for explanation and understanding the problem:

https://vimeo.com/1049279459 

and this code here was used to rearrange the header menu: (in base.css)

@media(max-width:989px){
header.header.header--middle-center.header--mobile-center.page-width.header--has-menu.header--has-social.header--has-account {
    padding-left: 11px !important;
    padding-right: 11px !important;
}
.header__icons {
    padding-right: 0 !important;
}
}

[CodingFifty]

Hi @LeandroS,

Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css file Add the provided code at the end of the file.

html, body {
    overflow-x: hidden !important;
}

[Made4uo-Ribe · Accepted solution]

Hi @LeandroS 

Thank you fro reaching out. 

Try this code.

Add in the theme.liquid. 

• From your Shopify admin dashboard, click on "Online Store" and then "Themes"
• Find the theme that you want to edit and click on "Actions" and then "Edit code".
• In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag

<style>
@media only screen and (max-width: 749px){
.header {
    padding-left: 1rem;
    padding-right: 1rem;
}
}
</style>

And Save. 

The header have a default padding I just lesser the size. 

[Made4uo-Ribe]

Welcome! Would you mind hitting 'like' as well? Thanks!