Dawn theme: how to show only one product per row in mobile screen

Store Design
1

Hi,
Please check my store, yarnic.com, i want to display only one product per row instead of two products per row as it shows now on mobile screen.
Please tell me how to do that ?

1 Like
2

Hello! Like this?

If so, please let me know your .myshopify.com url and I will send collaborator request and fix this for you. My rate is 50$/hour and this will be .5 hour of work.

Screen Shot 2022-04-02 at 12.46.04 PM.png
Screen Shot 2022-04-02 at 12.46.04 PM.png762Ă—1652 220 KB

3

by only coding brother you can do this , hire a programmer so its easy for them , good luck

4

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/component-product-grid.css->paste below code at the bottom of the file:
@media (max-width: 480px) {
.product-grid .grid__item {
    width: 100% !important;
    max-width: 100% !important;
}
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

1 Like
5

Hello AvadaCommerce,

I couldn’t find the file “component-product-grid.css”, how can I apply this solution?

Thanks in advance