Jump to content

MiridiosII

Member
  • Posts

    8
  • Joined

  • Last visited

Everything posted by MiridiosII

  1. 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; } }
  2. @media only screen and (max-width: 767px) { .products.collection-content-wrapper .list-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-column-gap: 2vw; grid-row-gap: 4vw; padding: 0; } } On mobile view, the product grid will now show 2 columns instead of 1. You can change this to show more on mobile by changing "repeat(4,minmax(0,1fr))". If you turn your phone sideways and want 4 columns, you can adjust the max width for when the phone is sideways and create another css for when the phone is vertical.
  3. 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; } }
×
×
  • 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.