Mobile collections page width is too wide (Prestige theme)

[Arter]

Hi,

The collections page width on mobile is too wide. This causes a scrollbar to appear when you swipe slightly left on the collections page. Resulting in a blank section with a weird line on the right side of the screen.

Store: arterclo.com

pass: yaifra

Prestige Theme

I have attached an image of what the blank space looks like.

[LizHoang · Accepted solution]

Hi @Arter 

You can follow the instruction here : 

1. Go to Shopify > Theme > Customize > open Custom CSS

2. Copy and paste this code to the section > Save

@media screen and (max-width: 768px){
body {
    overflow-x: hidden !important;
}
}

Hope it helps.

[Arter]

Works perfectly. Thanks

[tim]

The filter toolbar in collection section is too wide.

It happens because someone has overridden original margins on container:

@media screen and (max-width: 750px){
.shopify-section--main-collection .container {
    margin-left: 10px !important;
    margin-right: 10px !important;
}
}

And filters container expects different margins on its parent.

So you need to compensate for this (in Custom CSS, of course):

@media screen and (max-width: 750px) {
  .collection-toolbar.full-bleed {
    margin: 0 -10px;
  }
}

One needs to be careful when setting  overflow: hidden; on body -- if there are sticky elements on the page, they may stop functioning.

[Arter]

Thanks!