Mobile Website Horizontal Play/Scroll

Store Design
, , ,
1

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;
}
}
1 Like
2

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;
}
3

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 tag and paste the code below before the tag

And Save.

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

Made4uoRibe_0-1737641439065.png
Made4uoRibe_0-1737641439065.png315×314 33.4 KB

4

Welcome! Would you mind hitting ‘like’ as well? Thanks!