Changing Product Layout on Shop Pages for Mobile

Site URL: https://www.immyhowardmillinery.com/bandanna-bows

Hi there, 

I am in the process of building some product pages on my website (the current products listed are demos set up by my Squarespace template and are unlinked, but the pages are enabled) and the current layout of my products is 3 per row on Desktop view.

I am trying to alter the mobile view of my product pages to have 2 products per row, instead of 1 product per row. 

Is there a way I would be able to do this? Any help would be much appreciated. I am very new to using Squarespace so apologies if I have overlooked anything obvious!

Cheers

Immy

@tuanphanI see you seem to be a wizard at this! Hoping you might be able to possibly help me at all? Thanks!

17 hours ago, ImmyH said:

Site URL: https://www.immyhowardmillinery.com/bandanna-bows

Hi there, 

I am in the process of building some product pages on my website (the current products listed are demos set up by my Squarespace template and are unlinked, but the pages are enabled) and the current layout of my products is 3 per row on Desktop view.

I am trying to alter the mobile view of my product pages to have 2 products per row, instead of 1 product per row. 

Is there a way I would be able to do this? Any help would be much appreciated. I am very new to using Squarespace so apologies if I have overlooked anything obvious!

Cheers

Immy

@tuanphanI see you seem to be a wizard at this! Hoping you might be able to possibly help me at all? Thanks!

try adding this to Design->Custom CSS

@media only screen and (max-width: 700px) {
  #productList {
      display: flex;
      flex-wrap: wrap;
  }  
  #productList .product {
      float: left;
      margin-left: 0;
      margin-top: 0;
      flex: 50%;
      padding: 1%;
      box-sizing: border-box;
      margin-bottom: 0%;
  }  
}

Hi there, 

Thank you so much! This has worked perfectly I believe! Thank you for all your help xx

On 4/14/2021 at 4:24 PM, tuanphan said:

Some feedback on your site, hope it uselful

Site URL: https://www.immyhowardmillinery.com/

1. (Tablet-Shop page) Want to move nav category to top of page?

2. (Mobile-Shop) Add category text next to plus icon?

3. (Tablet-Product) Move category nav to top of product? & increase description width?

4. (Mobile-Footer) back to top doesn’t work

5. (Tablet-Footer) Add back to top on tablet?

Hi Tuanphan, 

Thank you so much for your website feedback, it really is so appreciated, and I am hoping to get some of these errors/amendments fixed- thank you! I was wondering if I might be able to gain a little more of your expertise on a couple of things...

-Do you know how I might be able to move my Nav catergory to the top of my page on tablet view at all?

-Is there a way in which I can add catergory text next to the plus icon? I would really like to be able to do this most importantly, if possible. 

Finally, if you or anyone on the server knew of a way in which I might be able to make my 'add to cart' button at the top of my product description, rather than at the bottom, that would be marvellous. Thank you ever so much!

Best wishes

Immy

On 4/22/2021 at 6:38 PM, ImmyH said:

Hi Tuanphan, 

Thank you so much for your website feedback, it really is so appreciated, and I am hoping to get some of these errors/amendments fixed- thank you! I was wondering if I might be able to gain a little more of your expertise on a couple of things...

-Do you know how I might be able to move my Nav catergory to the top of my page on tablet view at all?

-Is there a way in which I can add catergory text next to the plus icon? I would really like to be able to do this most importantly, if possible. 

 

Finally, if you or anyone on the server knew of a way in which I might be able to make my 'add to cart' button at the top of my product description, rather than at the bottom, that would be marvellous. Thank you ever so much!

 

Best wishes

 

Immy

Hi,

The shop page url doesn't exist. Can you check again?

https://www.immyhowardmillinery.com/bandanna-bows

On 4/24/2021 at 12:35 PM, tuanphan said:

Hi,

The shop page url doesn't exist. Can you check again?

https://www.immyhowardmillinery.com/bandanna-bows

Hi Tuanphan!

My apologies, here is the correct URL! Thanks ever so much again

https://www.immyhowardmillinery.com/bows

10 minutes ago, tuanphan said:

Add to Design > Custom CSS > then save & reload your site

/* Move sidebar nav to top of page tablet */
@media screen and (max-width:900px) and (min-width:641px) {
div#categoryNav {
    width: 100%;
    padding-right: 0 !important;
}
ul.category-nav-links {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}
li.nav-section-label {
    flex: 1 1 100%;
    text-align: center;
}
ul.category-nav-links>li:not(:first-child) {
    margin-right: 2.8vw;
}
.collection-type-products.view-list div#content {
    width: 100% !important;
}
}
/* Add category text next to plus icon */
@media screen and (max-width:640px) {
.category-nav-toggle:before {
    content: "Category";
    display: block;
    text-align: left;
    position: relative;
    bottom: -10px;
}
}

Finally, if you or anyone on the server knew of a way in which I might be able to make my 'add to cart' button at the top of my product description, rather than at the bottom, that would be marvellous. Thank you ever so much!

it looks like you solved this?

Hi Tuanphan!

Yes, thanks to your amazing help- I was able to solve the Add to cart issue! I cannot thank you enough. The tablet coding situation has also worked a treat as well, along with the category text! You are a total genius. Thank you. I am very new to all of this so appreciate your help SO much.

Thanks again!
Best wishes

Immy

On 5/10/2021 at 2:53 PM, ImmyH said:

Hi Tuanphan!

Yes, thanks to your amazing help- I was able to solve the Add to cart issue! I cannot thank you enough. The tablet coding situation has also worked a treat as well, along with the category text! You are a total genius. Thank you. I am very new to all of this so appreciate your help SO much.

 

Thanks again!
Best wishes

Immy

You're welcome.

If you have any other problems, just reply here, or you can also create new question. We always ready to help.

6 minutes ago, tuanphan said:

You're welcome.

If you have any other problems, just reply here, or you can also create new question. We always ready to help.

Thank you, that is so appreciated! I have dropped a message over your way on another question I posted about potentially creating 2 buttons on my website homepage banner instead of one 🙂 if you would like me to send that here or if there is any extra info you need, just let me know. Cheers again!

On 5/12/2021 at 3:03 PM, ImmyH said:

Thank you, that is so appreciated! I have dropped a message over your way on another question I posted about potentially creating 2 buttons on my website homepage banner instead of one 🙂 if you would like me to send that here or if there is any extra info you need, just let me know. Cheers again!

Can you share link to this question?

Hi Please could you help me with this same issue, I would like the products on mobile to have 2 side by side with a small white gap in the middle of the products.

www.scrunchme.co.uk 

I currently have this code on my site to have them next to each other - 

@media screen and (max-width: 767px) {
div#block-d1ce7c4167f1c59211a0, [data-section-id="60da3910ceea0479fbfe9006"] .content-wrapper, [data-section-id="619acd562bb7196d4e128ddb"] .content-wrapper,
   div#block-1f282f5221a1235694a5 {
    padding-top: 0px !important;
}

9 hours ago, CoralDerfurt said:

Hi Please could you help me with this same issue, I would like the products on mobile to have 2 side by side with a small white gap in the middle of the products.

www.scrunchme.co.uk 

 

I currently have this code on my site to have them next to each other - 

@media screen and (max-width: 767px) {
div#block-d1ce7c4167f1c59211a0, [data-section-id="60da3910ceea0479fbfe9006"] .content-wrapper, [data-section-id="619acd562bb7196d4e128ddb"] .content-wrapper,
   div#block-1f282f5221a1235694a5 {
    padding-top: 0px !important;
}

Do you mean this part?

Try adding to Home > Design > Custom Css

@media only screen and (max-width: 767px) {
  #block-c126541c7ea03f87cae9 .slide.sqs-gallery-design-grid-slide {
    width: 48% !important;
    margin: 2px;
  }
}

Support me by pressing 👍  or marking as solution if this useful for you

Hi,

Thank you so much for your reply! I really appreciate your help, I've attached an image of where I want a small amount of white space. In-between the products as at the moment they are so close together. I have a bit of code on my site I will paste everything below as I'm not sure if something in there might be blocking this. 

Thank you so much again!

Coral

/* 2 Column Product Grid */
@media only screen and (max-width:640px) {
.products .list-grid {
display: flex;
flex-wrap: wrap;
justify-content: ;
}
.products .grid-item {
width: 50%;
}
}

/* Cart Title */
.cart-title {
  font-size: 0!important;
}
.cart-title:before {
  text-transform: none!important;
  font-size: 24px!important;
  content: "Shopping Cart";
}

/* Sold out text */
.product-mark.sold-out {
    text-transform: capitalize !important;
}

/* Product slide arrows control */
@media screen and (max-width:767px) {
.ProductItem-gallery-carousel-controls {
    display: flex !important;
}
/* arrows background */
.ProductItem-gallery-carousel-controls * {
    background: white;
}
.ProductItem-gallery-carousel-controls>div {
    justify-content: center !important;
}
.ProductItem .ProductItem-gallery-carousel-controls>div::after, .ProductItem .ProductItem-gallery-carousel-controls>div::before {
    border-color: black !important;
}
}

/* Show category nav links */
div.nested-category-tree-wrapper {
    display: flex !important;
    float: none !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
}
section.products.collection-content-wrapper.products-list {
    flex-direction: column !important;
    display: flex;
}
.nested-category-tree-wrapper>ul {
    width: 100% !important;
    display: flex;
    justify-content: center;
    align-items: center;
}
.nested-category-tree-wrapper>ul li {
    margin-left: 2vw;
}
nav.nested-category-breadcrumb {
    display: none !important;
}
ul.nested-category-children {
    display: none !important;
}

@media screen and (max-width: 800px) {
    .homepage .gallery-fullscreen-slideshow {
        height: 53vh !important;
    }

    .homepage .gallery-fullscreen-slideshow[data-width="full"] {
        height: 20vh !important
    }
    .homepage .gallery-fullscreen-slideshow img {
    object-fit: contain !important;
}
}

@media screen and (max-width:767px) {
.collection-5e77e8500ff82c23205f2869.view-item #page section:nth-child(1) {
    min-height: 50vh !important;
}
}

.page-section.gallery-section {
padding-top: 0px !important;
}
@media screen and (min-width: 640px) {
.gallery-fullscreen-slideshow {
height: 120vh !important;
}
}
@media screen and (max-width: 600px) {
.gallery-fullscreen-slideshow {
height: 200vh !important; // Change this value to modify gallery height on mobile
}
}
.gallery-fullscreen-slideshow[data-show-captions="true"][data-width="full-bleed"] {
margin-bottom: 0;
}

@media screen and (max-width: 575px) {
  .products.collection-content-wrapper .nested-category-children {
    display: block;
  }
  .products.collection-content-wrapper .nested-category-breadcrumb-list-item {
    display: block;
    text-align: left;
}
  .products.collection-content-wrapper .breadcrumb-separator {
    display: none;
  }
  
}
/* Space between products */
@media screen and (max-width:767px) {
.products.collection-content-wrapper .grid-item.is-loaded {
    margin-bottom: 20px;
}
}

@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 screen and (max-width: 767px) {
div#block-d1ce7c4167f1c59211a0, [data-section-id="60da3910ceea0479fbfe9006"] .content-wrapper, [data-section-id="619acd562bb7196d4e128ddb"] .content-wrapper,
   div#block-1f282f5221a1235694a5 {
    padding-top: 0px !important;
}

[data-section-id="620c0ad499afc22e16b48e25"]  .gallery.gallery-section-wrapper {
        height: 50vh;
}
[data-section-id="620c1742add4ae45a3027dce"]  .gallery.gallery-section-wrapper {
    height: 47vh;
}
}

@media screen and (max-width: 700px) {
div#block-d1ce7c4167f1c59211a0, [data-section-id="60da3910ceea0479fbfe9006"] .content-wrapper, [data-section-id="619acd562bb7196d4e128ddb"] .content-wrapper,
   div#block-1f282f5221a1235694a5 {
    padding-top: 10px !important;
}
[data-section-id="620c0ad499afc22e16b48e25"]  .gallery.gallery-section-wrapper {
        height: 50vh;
}
[data-section-id="620c1742add4ae45a3027dce"]  .gallery.gallery-section-wrapper {
    height: 47vh;
}
}

@media only screen and (max-width: 767px) {
  #block-c126541c7ea03f87cae9 .slide.sqs-gallery-design-grid-slide {
    width: 48% !important;
    margin: 2px;
  }
}

Add this to Design > Custom CSS

@media screen and (max-width:767px) {
.products .list-grid {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    grid-gap: 10px 10px;
}
.products .list-grid>div {
    width: 100% !important;
    margin: 0 !important;
}
}

Thank you so much! This worked perfectly. 

i have the same problem! i got it to be rows of 3 for phone view but i put in the above code because i had no spacing between photos and its not working! Help! it looks sooooo bad lololol

22 hours ago, dmessi said:

i have the same problem! i got it to be rows of 3 for phone view but i put in the above code because i had no spacing between photos and its not working! Help! it looks sooooo bad lololol

Use this code

didnt do anything. still same problem

On 7/27/2023 at 11:48 AM, dmessi said:

didnt do anything. still same problem

What is site url?

Hi,  I am trying to do the same thing on my shop page! Tried some of these codes but it doesn't go 2 x 2 it just goes in a long line.

https://www.healbyandrewlethbridge.com/store-2

 

On 9/8/2023 at 4:11 PM, aychenn said:

Hi,  I am trying to do the same thing on my shop page! Tried some of these codes but it doesn't go 2 x 2 it just goes in a long line.

https://www.healbyandrewlethbridge.com/store-2

 

Use this code to Website > Website Tools > Custom CSS

/* Product 2 columns mobile */
@media screen and (max-width:767px) {
    .products.collection-content-wrapper .list-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-column-gap: 10px;
}
}

5 hours ago, tuanphan said:

/* Product 2 columns mobile */
@media screen and (max-width:767px) {
    .products.collection-content-wrapper .list-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-column-gap: 10px;
}
}

Hi @tuanphan I'm trying to style the mobile prettyflowerfarm.com shop with two columns as well. I tried the css codes, but they are not working. I've also noticed an error message "missing closing '}' at the bottom of the css, but cannot find where to add it. Can you please help? Thank you!

On 9/12/2023 at 10:53 PM, Jillg said:

 

 

Hi @tuanphan I'm trying to style the mobile prettyflowerfarm.com shop with two columns as well. I tried the css codes, but they are not working. I've also noticed an error message "missing closing '}' at the bottom of the css, but cannot find where to add it. Can you please help? Thank you!

If missing closing } error appear, some or all CSS code won't work properly. Can you send all current code? We can check easier

With 2 columns, use this new code to Settings > Developer Tools > Code Injection > Header

<style>
  @media screen and (max-width: 767px ) {
    .products.collection-content-wrapper .list-grid {
        display:grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-column-gap: 30px;
        grid-row-gap: 0px;
        padding: 0;
    }
    .products.collection-content-wrapper .grid-item {
        width: 100% !important;
    }
}
</style>

As a note to anyone wanting a 2-column grid on their mobile product page, this feature has been added to the store section settings. You can find it by editing the store section and toggling the mobile view: