Fix weird overlaps and center featured collection on mobile

Solved

Fix weird overlaps and center featured collection on mobile

jasminsharp97
Shopify Partner
89 1 31

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?

Screenshot 2024-06-11 143552.png

 

Also, I would like the featured collection on mobile to be centered, not left aligned. 

Screenshot 2024-06-11 143213.png

Accepted Solution (1)

EBOOST
Shopify Partner
1292 327 391

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;
  }
}  

EBOOST_0-1718145729873.png

 

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips

View solution in original post

Replies 2 (2)

EBOOST
Shopify Partner
1292 327 391

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;
  }
}  

EBOOST_0-1718145729873.png

 

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips
jasminsharp97
Shopify Partner
89 1 31

That worked perfectly, thank you so much!