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?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, 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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.