Make products one item per work in Mobile

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

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

 

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?

Hi @bangank36:

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

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

Hi @tuanphan:

It's so close!  Thank you.  Please see the photo below.  Right now the cart is moving as I scroll instead of staying to the left of the hamburger menu in the top navigation bar.  Is there a way to move it to the left of the menu and have it not float?

Thanks so much for your help.