Personalized checkout and custom promotions with Shopify Scripts
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!
Solved! Go to the solution
This is an 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
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
Hello SideNode,
I use the code it still didn't fix the problem. Any thought why?
This is an 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
Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025Discover opportunities to improve SEO with new guidance available from Shopify’s growth...
By Jacqui May 1, 2025