Reduce padding featured collection on mobile

Store Design
1

Hi there,

Can someone assist with reducing the padding on featured collection for mobile only as per attached image please?

Screenshot 2026-01-18 085845
Screenshot 2026-01-18 085845473×493 116 KB

4

Hi @Sharyn2

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

Best regards,
Devcoder :laptop:

5

Hi, @Sharyn2
Can you share your store url so that I can check it?

6

Hi,

Hope this will help

At base.css, theme.css or component-collection.css need to add css

CSS example

@media screen and (max-width: 749px) {
  .featured-collection,
  .section-featured-collection,
  .collection {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .featured-collection .grid,
  .collection .grid {
    row-gap: 10px;
  }
}

If the padding is coming from the section wrapper

Some themes wrap sections in a .page-width container. In that case this tweak will help:

@media screen and (max-width: 749px) {
  .featured-collection .page-width {
    padding-left: 10px;
    padding-right: 10px;
  }
}
8

hey @Sharyn2 share the URL of your website so then i can help you