3 Column Product Block View on Mobile

On 3/7/2021 at 6:54 PM, madpex said:

@tuanphan would you be able to help please? 

I am trying to get my content block products to been seen on 1 row on mobile device, similar to the above question.

I have attached an image of what I currently have, and an example of what I’m looking for please.

Website 

http://www.luxuraio.com/candles/p/candle-1

hope you’ll be able to assist,

thank you,

The url doesn't exist.

On 10/6/2021 at 6:42 AM, Gem_Emerald said:

 

Site URL: https://emeraldillustrative.squarespace.com/store

Hello, I am having the same problem trying to get the 3 product blocks to sit side by side in my mobile view. I don't have any CSS coding on my website yet and am still learning how to code. If someone here can please help me with everything I need to add to my CSS to make this happen that would be much appreciated. Thank you!

Add to Design > Custom CSS

@media screen and (max-width:767px) {
.products .list-grid {
    display: grid !important;
    grid-template-columns: repeat(3,1fr);
}
.products.collection-content-wrapper .grid-item {
    width: 99% !important;
}
}

Sorry to drag up an old post, but this is the only place i can find information on this, I have tried using various codes here after (attempting to) find the ID of the section I'm trying to edit but can't seem to get it to work.

could anyone please help?

trying to get mobile to display 3 columns of product boxes on this page:

www.asteriawax.co.uk/picknmix

Thanks in advance 

On 8/12/2022 at 1:22 PM, Asteria said:

Sorry to drag up an old post, but this is the only place i can find information on this, I have tried using various codes here after (attempting to) find the ID of the section I'm trying to edit but can't seem to get it to work.

 

could anyone please help?

 

trying to get mobile to display 3 columns of product boxes on this page:

 

www.asteriawax.co.uk/picknmix

 

Thanks in advance 

Edit page > Click Mobile Icon on top right > Then you can adjust layout on mobile. This won't affect desktop

Tuanphan,

Thanks for getting back to me,

I have tried this, however it only allows me to drag the product blocks to half the size of the mobile view.

This would be ok however the add to card button doesn't scale with the size of the box? or am i missing something.

Asteria

On 8/19/2022 at 1:34 AM, Asteria said:

Tuanphan,

 

Thanks for getting back to me,

I have tried this, however it only allows me to drag the product blocks to half the size of the mobile view.

This would be ok however the add to card button doesn't scale with the size of the box? or am i missing something.

 

Asteria

Try adding to Design > Custom CSS

@media screen and (max-width:767px) {
.fe-62f558ea57730875157357cc {
    grid-template-columns: repeat(3,1fr);
    display: grid !important;
    grid-gap: 10px 10px !important;
}

.fe-62f558ea57730875157357cc>div {
    grid-area: unset !important;
}
}

Sorry to be a pain, however this just caused all my product blocks to be displayed over 3 rows and infinitesimally small yet the buttons where still huge...

Thanks again 

On 8/21/2022 at 1:42 PM, Asteria said:

Sorry to be a pain, however this just caused all my product blocks to be displayed over 3 rows and infinitesimally small yet the buttons where still huge...

 

Thanks again 

So you don't want them appear in 3 items/row?

What should it look like?

Hi - how can I add in mobile view two columns for my shop/product pages? 

1 hour ago, Rab881 said:

Hi - how can I add in mobile view two columns for my shop/product pages? 

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

If it doesn't work, please share link to your shop page