Product per row setting on the mobile / desktop mode

anna-michielan
Tourist
14 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)

 

0 Likes
NZA
Pathfinder
105 12 32

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.

0 Likes
Natztech
Shopify Partner
1369 383 923

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

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
0 Likes
anna-michielan
Tourist
14 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 

0 Likes
anna-michielan
Tourist
14 0 1

Hi, right click security removed @Natztech 

Thank you

0 Likes
Natztech
Shopify Partner
1369 383 923

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

 

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
NZA
Pathfinder
105 12 32

@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 ?

0 Likes
anna-michielan
Tourist
14 0 1

HI @Natztech @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.

0 Likes
anna-michielan
Tourist
14 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.

0 Likes
Natztech
Shopify Partner
1369 383 923

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 ?

 

 

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
0 Likes