Change product layout on Mobile View

Site URL: http://anjart.co.uk

Hi,

I've got a Nevins template and on the desktop I have 4 rows of products in the shop. On the mobile view its stacking one on top of the other, making it incredibly long for anyone scrolling through.

Is it possible to use code to display two products side by side on the mobile view without changing the desktop layout and can anyone tell me how to go about this?

Many thanks

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
.list-grid {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-row-gap: 5px;
    grid-column-gap: 10px;
}
}

29 minutes ago, tuanphan said:

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
.list-grid {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-row-gap: 5px;
    grid-column-gap: 10px;
}
}

 

Thanks so much! Worked a treat :)

On 8/7/2020 at 11:42 PM, tuanphan said:

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
.list-grid {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-row-gap: 5px;
    grid-column-gap: 10px;
}
}

 

@tuanphan Hi there. I'm having a similar issue with displaying products side by side on mobile. Here's my website: www.totaljoy.co

Could you please help out with some custom CSS to display two columns on mobile? Thank you x

4 hours ago, totaljoy said:

@tuanphan Hi there. I'm having a similar issue with displaying products side by side on mobile. Here's my website: www.totaljoy.co

Could you please help out with some custom CSS to display two columns on mobile? Thank you x

Where products?

On 8/24/2020 at 5:44 PM, tuanphan said:

Where products?

Here: totaljoy.co/shop

2 hours ago, totaljoy said:

Here: totaljoy.co/shop

url doesn't exist. Have you enabled it yet?

Hi @tuanphan 

Many thanks for your input. I tried keying that into my Custom CSS but it didn't seem to work unfortunately. 
It is a page with product blocks as opposed to a product page.

https://www.heydoodle.com.au/shopcollection

If you have a spare moment could you have a look?

On 2/11/2021 at 9:15 AM, B3stoh said:

Hi @tuanphan 

Many thanks for your input. I tried keying that into my Custom CSS but it didn't seem to work unfortunately. 
It is a page with product blocks as opposed to a product page.

https://www.heydoodle.com.au/shopcollection

If you have a spare moment could you have a look?

It looks like you solved this?

On 8/7/2020 at 9:42 AM, tuanphan said:

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
.list-grid {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-row-gap: 5px;
    grid-column-gap: 10px;
}
}

 

Hello, I would like to do something similar to my product page on mobile and desktop view. 
For desktop view I would like to keep 3 products per row.
For mobile view I would like to keep only 1 product per row. Is this possible?
Thanks in advance!

16 hours ago, natifco said:

Hello, I would like to do something similar to my product page on mobile and desktop view. 
For desktop view I would like to keep 3 products per row.
For mobile view I would like to keep only 1 product per row. Is this possible?
Thanks in advance!

Hi. What is product page url?

With code I sent, if you want 1 item/row, just change number 2 to 1

Hi,

I would like to make the photo in the product page smaller (I use the "medium" layout for the page) and the name of the produst together with the quantity and "add to cart" centred, could you please help me? This is the page: https://www.patasyladridos.com/shop/p/beetroot-cookies.

Many thanks🙏🏼

On 3/21/2024 at 9:11 PM, Yenna said:

Hi,

I would like to make the photo in the product page smaller (I use the "medium" layout for the page) and the name of the produst together with the quantity and "add to cart" centred, could you please help me? This is the page: https://www.patasyladridos.com/shop/p/beetroot-cookies.

Many thanks🙏🏼

To make image smaller on mobile, you can use this to Website > Website Tools > Custom CSS

@media screen and (max-width:767px) {
.pdp-layout .pdp-gallery {
    max-width: 90%;
    margin: 0 auto;
}
.pdp-layout .pdp-details .pdp-details-title {
    text-align: center;
}
div.pdp-details-price {
    text-align: center;
}
}

Amazing, you are always so helpful, thanks a lot!!!🤩🙏🏼