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!
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.
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
Hi shop url: anna-michielan.myshopify.com
it’s on the main / front page and I’m using impulse theme.
Thank you @NZA 
Hi, right click security removed @Kinjaldavra
Thank you
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;
}
}
@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 @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?
@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.
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 ?
@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