Shopify themes, liquid, logos, and UX
Site preview URL: https://7tvz73t7kefuertl-60071346230.shopifypreview.com
I'm working on a site on the Dawn theme and using a featured collection block on the home page. Everything looks good on desktop, but the mobile version of the page in the preview of the theme builder it shows some weird overlaps of the products. How do I ensure the products don't overlap like that?
Also, I would like the featured collection on mobile to be centered, not left aligned.
Solved! Go to the solution
This is an accepted solution.
Hi @jasminsharp97 ,
May I suggest to update code these steps:
1. Go to Store Online-> theme -> edit code
2. Assets/base.css
3. Add code below to end of file
@media(max-width: 768px){
.card-wrapper.product-card-wrapper {
margin: 0 auto;
}
.contains-card--product.grid {
grid-row-gap: 2rem;
}
.contains-card--product.grid.grid--1-col-tablet-down .grid__item:last-child {
margin-top: 0;
}
}
This is an accepted solution.
Hi @jasminsharp97 ,
May I suggest to update code these steps:
1. Go to Store Online-> theme -> edit code
2. Assets/base.css
3. Add code below to end of file
@media(max-width: 768px){
.card-wrapper.product-card-wrapper {
margin: 0 auto;
}
.contains-card--product.grid {
grid-row-gap: 2rem;
}
.contains-card--product.grid.grid--1-col-tablet-down .grid__item:last-child {
margin-top: 0;
}
}
That worked perfectly, thank you so much!
Find Global Growth Opportunities For Your Business with Shopify AcademyLearn how to exp...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025