Lace

1 hour ago, tuanphan said:

Your layout, can't change to 2 items/row on mobile. Need to edit some things on your layout, then able to use code.

If you can add me as a contributor, I can take a look

Hi, thanks a lot, 

I'll drop you a private message regarding this.

Hi tuanphan,

Sadly the code you gave me didn't work out as I expected. I wanted the Best Seller Section to have 2 Products Side by side, 2 Columns and 2 Rows as there are 4 products there in total.

Can you help me to have a look and give me another custom CSS code? 

Thanks a lot,

My website:https://morpheus.squarespace.com/ 

23 hours ago, tuanphan said:

/* Best sellers mobile */ @media screen and (max-width:767px) { div#page-section-5fdc9ce76ba1be148e86d3d8 .span-4 { width: 50% !important; float: left !important; } }

Sorry it didn't seem to work when I add one more product on the best seller section. 

Can you have a look for me? Thanks 

My website:https://morpheus.squarespace.com/

On 2/5/2021 at 9:33 AM, tuanphan said:

It looks like you solved this?

Yes I have sorted this thank you! 

However still on my landing page, I have a Best sellers section and in mobile view they stacked, is there any code I can use to let my landing page's product view on mobile to be in 2 column? 

Thank you: https://morpheus.squarespace.com/ 

4 minutes ago, tuanphan said:

Add to Design > 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;
}
}

 

Thank you Tuanphan, it works magically! 

Although I still got a problem, which is a white line appears on top of the first row products. Have no idea how to get rid of it, it only appears on mobile view 😞

Can you help? Thank you! 

page: https://morpheus.squarespace.com/shop

On 11/23/2020 at 2:20 PM, tuanphan said:

/* 3 columns mobile */ @media screen and (max-width:640px) { div#page-5fb8554758f7584e710bd7be>.row:first-child .span-4 { width: 33.33% !important; float: left !important; } }

Hey Tuanphan,

My site got the same issue and I've try to use this code however it doesn't work on my page. 

I want my product page to be in 2 columns on mobile view, can you help me with this?

The page I want to change is: https://morpheus.squarespace.com/shop

Thank you!