eCommerce - Mobile category filter/stacking alignment on mobile css

Hi all, 

I have an issue with alignment on mobile devices. 

Having injected CSS from Beatriz Caraballo (link here: https://www.youtube.com/watch?v=IWAlbxP49A4 ) to stack shop categories on SQSP, it worked but for some reason the first category is not following the same alignment as those that follow. Any ideas on why?

// CSS Code Injected //

// Mobile Category Filter //
  @media screen and (max-width: 575px) {
  .products.collection-content-wrapper .nested-category-children {
  flex-direction: column; 
    align-items: left;
    overflow-x: hidden;
    padding-bottom: 50px;
}
  .nested-category-breadcrumb-list-item .breadcrumb-separator {
    display: none;
  }
}

// End //

The page/site in question is here: https://thebathhousewigston.squarespace.com/store

Any help greatly appreciated. 

Best, M

It is fine to me

Hi Tuanphan

It’s fine on desktop (the screenshot you’ve taken, I think). It’s mobile that’s got the issue (my screenshot is taken from). The ‘shop all’ doesn’t show on mobile, so maybe that’s causing a conflict? Or if your screenshot is taken from mobile, maybe it’s a device issue not SQSP? 
 

Marc

Screenshot from desktop

WIth mobile, add this to Design > Custom CSS to fix problem

/* Fix mobile categories align */
@media screen and (max-width:767px) {
a.nested-category-breadcrumb-link {
    margin-left: 0 !important;
}
}

Thanks Tuanphan. That's fixed it. Don't know what we'd all do without you! 🙂