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

Changing Product Layout on Shop Pages for Mobile


ImmyH
Go to solution Solved by tuanphan,

Question

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!

1.jpg

2.jpg

Edited by ImmyH
Link to post
  • Answers 11
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

try adding this to Design->Custom CSS @media only screen and (max-width: 700px) { #productList { display: flex; flex-wrap: wrap; } #productList .product { float: left;

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 Squar

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 cate

Posted Images

11 answers to this question

Recommended Posts

  • 0
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!

1.jpg

2.jpg

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

image.png.44c9937598b75e2836a8799f332bdced.png

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post
  • 0
On 5/5/2021 at 4:13 PM, ImmyH said:

Hi Tuanphan!

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

 

https://www.immyhowardmillinery.com/bows

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?

Link to post
  • 1
On 4/13/2021 at 5:55 PM, ImmyH said:

Hi there, 

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

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?

immyhowardmillinery.com-tablet-shop-page

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

immyhowardmillinery.com-mobile-shop-min.

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

immyhowardmillinery.com-tablet-product-m

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

immyhowardmillinery.com-mobile-footer-mi

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

immyhowardmillinery.com-tablet-footer-mi

Link to post
  • 0
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?

immyhowardmillinery.com-tablet-shop-page

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

immyhowardmillinery.com-mobile-shop-min.

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

immyhowardmillinery.com-tablet-product-m

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

immyhowardmillinery.com-mobile-footer-mi

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

immyhowardmillinery.com-tablet-footer-mi

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

Link to post
  • 0
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

Link to post
  • 0
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

Link to post
  • 0
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.

Link to post
  • 0
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!

Link to post
  • 0
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?

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...