Mobile collections page width is too wide (Prestige theme)

Store Design
, , ,
1

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.

Screenshot 2024-11-16 at 12.48.28.png
Screenshot 2024-11-16 at 12.48.28.png1032×1804 91.7 KB

2

Hi @Streccent

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.

3

Works perfectly. Thanks

4

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.

5

Thanks!