Fix weird overlaps and center featured collection on mobile

[jasminsharp97]

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. 

[EBOOST · 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;
  }
}  

[jasminsharp97]

That worked perfectly, thank you so much!