Jump to content

Make products one item per work in Mobile

Recommended Posts

Site URL: https://www.houseofflow.co/shop

Good Morning.

I have two questions as I'm trying to customize the mobile product page on my website:

  1. I want to have only one product to show per row as opposed to the two that are currently visible (first photo).  This is the most important as I have the Universal Filter installed on the product page and cannot figure out how to change the size for the life of me. 
  2. Is there a way to create a simple cart icon to the left of the hamburger as opposed to the big standard black rectangle that is currently showing on my mobile site?

Please see the photos below and thank you for your help as always.

Best,

Grant

image.thumb.png.04b7e7b91d8897ec9c15809db2288d76.pngimage.thumb.png.a66347f1493e47a90b26c89b0ff1f953.png

 

Link to comment
3 hours ago, granthenrymedia said:

Site URL: https://www.houseofflow.co/shop

Good Morning.

I have two questions as I'm trying to customize the mobile product page on my website:

  1. I want to have only one product to show per row as opposed to the two that are currently visible (first photo).  This is the most important as I have the Universal Filter installed on the product page and cannot figure out how to change the size for the life of me. 
  2. Is there a way to create a simple cart icon to the left of the hamburger as opposed to the big standard black rectangle that is currently showing on my mobile site?

Please see the photos below and thank you for your help as always.

Best,

Grant

image.thumb.png.04b7e7b91d8897ec9c15809db2288d76.pngimage.thumb.png.a66347f1493e47a90b26c89b0ff1f953.png

 

1. You can add the following code to set one item on each row 

@media only screen and (max-width: 767px){
  #productList {
    display: block;
  }
}

2. Do you mean keeping the current cart and adding one more cart on the left of Hamburger menu?

Greeting, it's 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, Keyword Highlighter
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 comment
On 4/22/2022 at 8:46 PM, granthenrymedia said:

Hi 

Thank you so much.  That did the trick and it looks so much better now.

As far as #2 - I would like to get rid of the current cart and only have a cart icon to the left of the Hamburger menu?  Is that possible?

Thanks again for your help.

Best,

Grant

 

 

Try adding to Design > Custom CSS

@media screen and (max-width:640px) {
.sqs-pill-shopping-cart-content.dark {
    background-color: transparent !important;
    background-image: unset !important;
    border: none !important;
    box-shadow: none !important;
    min-width: unset !important;
    position: fixed !important;
    right: 0 !important;
}
.sqs-pill-shopping-cart-content.dark>*:nth-child(n+2) {
    display: none;
}
.icon {
    filter: invert(1);
}}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.