Jump to content

eCommerce - Mobile category filter/stacking alignment on mobile css

Recommended Posts

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

Screenshot 2023-07-21 at 12.25.23.png

Link to comment
  • Replies 4
  • Views 539
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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

Link to comment

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.