Product per row setting on the mobile / desktop mode

anna-michielan
Tourist
17 0 1

Hi, I use Impulse theme for the website anna-michielan.myshopify.com/

Is it possible to have 3 products per row in desktop view and only 1 product per row on mobile view (as in the pictures attached) in the same time?

I try to change the view of the mobile version, then when I switched the view into Desktop the setting follows the mobile version one.

Is it need css code modification?

Thank you!

Mobile View (one product, large image, in the middle)Mobile View (one product, large image, in the middle)

 

Desktop View (3 products)Desktop View (3 products)

 

Replies 10 (10)

NZA
Shopify Partner
128 12 34

Good day @anna-michielan , thank you for asking the question.

Can you please share you store url and password if there is any.

This will allow us to look at the website code through html code editor on chrome.

Can you also specify which section are you having trouble with and the theme you are using ?

Thanks.

anna-michielan
Tourist
17 0 1

Hi shop url: anna-michielan.myshopify.com

it's on the main / front page and I'm using impulse theme.

Thank you @NZA 🙂

NZA
Shopify Partner
128 12 34

@anna-michielan  Please open your store Store->Theme->Edit code then go to assets/theme.css and paste this code there at the very bottom of the file.

 

 

@media only screen and (max-width: 768px){
#shopify-section-161172896584b254e3 .grid-overflow-wrapper .grid { display: flex;  flex-wrap: wrap; }

#shopify-section-161172896584b254e3 .grid-overflow-wrapper .grid   .grid__item{  flex: 0 0 100%; }

#shopify-section-161172896584b254e3 .grid-overflow-wrapper { overflow-x: hidden; }
}

 

 

 

Please let me know if the code worked for you, I see you have multiple such sections, do you want the change to apply to all of them ?

anna-michielan
Tourist
17 0 1

HI @Kinjaldavra @NZA 

Thank you for the code. But what I mean is that the mobile version should be showing only 1 product per section, not 3 products showing vertically. And I want to keep the desktop version showing 3 products horizontally. Will it be possible?

 

 

I want to keep the desktop view looking like thisI want to keep the desktop view looking like thisAnd the mobile view to be only 1 product per section like this.And the mobile view to be only 1 product per section like this.

anna-michielan
Tourist
17 0 1

 


@NZA wrote:

@anna-michielan  Please open your store Store->Theme->Edit code then go to assets/theme.css and paste this code there at the very bottom of the file.

 

 

 

@media only screen and (max-width: 768px){
#shopify-section-161172896584b254e3 .grid-overflow-wrapper .grid { display: flex;  flex-wrap: wrap; }

#shopify-section-161172896584b254e3 .grid-overflow-wrapper .grid   .grid__item{  flex: 0 0 100%; }

#shopify-section-161172896584b254e3 .grid-overflow-wrapper { overflow-x: hidden; }
}

 

 

 

 

Please let me know if the code worked for you, I see you have multiple such sections, do you want the change to apply to all of them ?


Hi @NZA yes the code work for me. Can you please help me to provide if I want to change to apply all of the sections? Thank you in advance.

Kinjaldavra
Shopify Partner
2302 570 1422

hello @anna-michielan 

Please let me know if the code worked for you, can you  see you have multiple such sections, do you want the change to apply to all of them ?

 

 

NZA
Shopify Partner
128 12 34

@anna-michielan can you plesae tell when is the name of the section you are using in the theme file?

To do that you go to ACTIONS>EDIT CODE and in the sections part you will find the name of the file for the section you are using

Kinjaldavra
Shopify Partner
2302 570 1422

hello @anna-michielan 

your store is right-clicked security can you please remove your right-click security on your so I can provide you solution

anna-michielan
Tourist
17 0 1

Hi, right click security removed @Kinjaldavra 

Thank you 🙂

Kinjaldavra
Shopify Partner
2302 570 1422

hello @anna-michielan 


please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

@media only screen and (max-width: 768px){
#shopify-section-161172896584b254e3 .grid-overflow-wrapper .grid {
    display: flex;
    flex-wrap: wrap;
}
#shopify-section-161172896584b254e3 .grid-overflow-wrapper .grid   .grid__item{
	flex: 0 0 100%;
}
#shopify-section-161172896584b254e3 .grid-overflow-wrapper {
    overflow-x: hidden;
}
}