Customizing the size of product card - Reformation theme

[siva_fds]

I’m using the Reformation Shopify Premium Theme and would like to customize the product cards in the Collection Tabs section on the homepage.

Currently, on mobile devices, two product cards are displayed per row. I would like to change this so that only one product card is displayed per row, allowing for a larger and more prominent product card layout.

Preview link: https://ruwu1zei3bh0emb2-93517414692.shopifypreview.com

Please let me know how this can be implemented.

[Wsp]

Hey @siva_fds ,
Online Store → Themes → Edit Code → Assets → base.css (or theme.css) OR theme.liquid (before )

FINAL CODE

 @media screen and (max-width: 768px) {

  
  .collection-tabs .product-grid,
  .collection-tabs .grid,
  .collection-tabs__product-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .collection-tabs .grid__item,
  .collection-tabs .product-card,
  .collection-tabs__product-card {
    width: 100% !important;
    max-width: 100% !important;
  }

  
  .collection-tabs {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

Thanks.

[siva_fds]

@Wsp I can’t able to see the changes. I have updated the code

[Moeed]

@siva_fds Got it sorted out?

Best,
Moeed

[siva_fds]

Also want to get rid of the white space in the same section