Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Squarespace 7.1, how to setup the product breadcrumb and category layout on mobile...solved.


MiridiosII

Question

On squarespace version 7.1, when in mobile view, if you have a long list of categories, it creates a scrolling list that travels sideways and the breadcrumbs are gone on mobile.  Insert this code into your Custom CSS to make the categories center align and wrap, with no scrolling.  It also makes the breadcrumbs visible on mobile.

@media only screen and (max-width: 575px) {
.products.collection-content-wrapper .nested-category-children {
    padding-top: 30px;
    flex-wrap: wrap;
    overflow-x: hidden;
    justify-content: center;
  }
}
@media only screen and (max-width: 575px) {
.products.collection-content-wrapper .nested-category-breadcrumb {
    text-align: center;
  }
}
@media only screen and (max-width: 575px) {
.products.collection-content-wrapper .nested-category-title {
    text-align: center;
  }
}

 

Link to comment

5 answers to this question

Recommended Posts

  • 0

I forgot this.

@media only screen and (max-width: 767px) {
.tweak-product-basic-item-navigation-breadcrumbs .ProductItem .ProductItem-nav .ProductItem-nav-breadcrumb, .tweak-product-basic-item-navigation-both .ProductItem .ProductItem-nav .ProductItem-nav-breadcrumb {
    display: block;
    z-index: 1;
  }
}

 

Link to comment
  • 0
On 12/20/2020 at 1:06 AM, MiridiosII said:

I forgot this.


@media only screen and (max-width: 767px) {
.tweak-product-basic-item-navigation-breadcrumbs .ProductItem .ProductItem-nav .ProductItem-nav-breadcrumb, .tweak-product-basic-item-navigation-both .ProductItem .ProductItem-nav .ProductItem-nav-breadcrumb {
    display: block;
    z-index: 1;
  }
}

 

thank you so much that's really helpful! I don't seem to be getting all of the breadcrumbs though. I get Shop and product title. Much better than before but if there's a way of getting the subcategory title that would be fabulous!!

 

Link to comment
  • 0
On 1/10/2021 at 12:08 PM, No_Idea said:

thank you so much that's really helpful! I don't seem to be getting all of the breadcrumbs though. I get Shop and product title. Much better than before but if there's a way of getting the subcategory title that would be fabulous!!

 

Hi! What a big help this code is. Did we ever figure out how to display the "Category" breadcrumb?

Link to comment
  • 0

Thank you! This is working great.

I could not see any category display at all on mobile and tried just about every code snippet posted on this topic with no success. I finally realized: Category Type must be Top, not Sidebar (which I prefer). The sidebar navigation does show up when the mobile device is turned to horizontal position but that's not ideal...

I wanted to share this info for others having the same problem I had. (I might have missed it but I searched Sqsp documentation too and found no mention of this.)

sqsp cat.PNG

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...