Mobile off-center and has horizontal scroll

Shopify Discussion
,
1

Hello. I’m using the Dawn theme. My site is: https://safeplaceny.co/, and my pass is polar72.

grimworld_0-1680740469621.png
grimworld_0-1680740469621.png321×598 45.8 KB

grimworld_1-1680740475549.png
grimworld_1-1680740475549.png370×606 38.6 KB

As you can see, the website is off center and that awkward horizonal scroll happens. The nav icons (search and cart) are cut off, as well.

2

Hi @grimworld ,

This is because of your customized logo width. You can fix it by following the instructions below

  1. From you Admin page, go to Online store > Themes > Click the three dots on the theme you want to edit > Edit code
  2. Go to Asset folder and open the base.css file
  3. At very end of the code, add the code below
.header-wrapper h1.header__heading {
    max-width: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
}

See result below

made4Uo_0-1680743443652.png
made4Uo_0-1680743443652.png546×940 96.4 KB

3

Hi @Grimworld,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

@media(max-width:767px){
html,body{overflow-x:hidden !important}
}

Hope my solution works perfectly for you!

Best regards,

Victor | PageFly

4

Wouldn’t disabling overflow just remove the scroll feature? It wouldn’t unhide the icons?

5

I can confirm, this solution does not work. It just adds a second vertical scroll bar.

6

can you give me access? if have access I can fix it properly