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

Technical Q&A
1

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!

2

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

3

Hello SideNode,

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

4

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.

SideNode_0-1689655006470.png
SideNode_0-1689655006470.png590×527 53.8 KB

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