Correct The 2 Columns Layout On Mobile So That The Size Adjusts Based On Screen Size

[Yusa1]

Hello,

I'm trying to correct the 2 columns layout on mobile so that the size adjusts based on screen size

Here an example of what i'm referring too down below on the video.  Website - https://avokitchen.com/

PROBLEM - https://share.getcloudapp.com/9Zuyx4wN

Any help I will gladly appreciated!

[SideNode]

hi @Yusa1 
Its SideNode! We will be happy to help you today.

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

@media screen and (min-width: 451px) and (max-width: 767px) {
.product-grid {
    display: flex;
    grid-gap: 0px;
}
}

If I was able to assist you, please remember to give it a Like and Mark it as the Solution!

Let me know if need further assistance
Regards,
SideNode

[Yusa1]

Hello SideNode,

I use the code it still didn't fix the problem. Any thought why?

[SideNode · Accepted solution]

hi @Yusa1 
You can try this code: it will be helpful to you.

@media screen and (min-width: 451px) and (max-width: 767px) {
ul#product-grid {
    display: flex;
    grid-gap: 0px;
}
}

You can see the change.

If I was able to assist you, please remember to give it a Like and Mark it as the Solution!

Let me know if need further assistance
Regards,
SideNode