Decreasing padding in Featured collection sections

[benpatjohn]

Hello,

I am looking to make some design changes on a mobile version of a page. There is too much white space between collections and I'd like to decrease it. Any tips? 

The URL is https://shop.slckr.us/collections/holiday-gift-kits 

[Francis_22]

You can remove the bottom border from the last 2 products and set the top and bottom padding of the collection section to 50 pixels.

[Made4uo-Ribe]

Hi @benpatjohn 

Just clarification, the space your referring to is on the homepage? Or in the collection page? This one?

If it is try this one.

1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
3. In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

@media (max-width: 767px) {
    .wide-container.theslck-product {
        padding-bottom: 2rem;
    }
    .wide-container.Shop-Teetwo, .product-list.home-product-list+.product-view-btn {
        padding-top: 1rem;
    }
}

• And Save.
• Result:
• 

  Note: You can adjust the sizes you prefer. 

 Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better! 

[Mateen_Asghar]

To decrease the padding in your Featured Collection section on the mobile version, you can follow these steps:

1. Go to Online Store > Themes in your Shopify admin.

2. Select your theme and click Actions > Edit code.

3. Under the Assets folder, open base.css, style.css, or theme.css.

4. Add the following code at the bottom:

@media (max-width: 767px) {
    .wide-container.theslck-product {
        padding-bottom: 2rem;
    }
    .wide-container.Shop-Teetwo, .product-list.home-product-list+.product-view-btn {
        padding-top: 1rem;
    }
}
​

• Save your changes and check the mobile view.

Let me know if you need further assistance!

[GTLOfficial]

Hello @benpatjohn 
Go to online store ----> themes ----> actions ----> edit code ----> assets ---->styles.css
add this code at the end of the file and save.

@media (max-width: 480px) {
.section-featured-collection .wide-container.theslck-product {
padding-top: 3svh;
padding-bottom: 0rem;
}
}

Thanks

[mt686]

Hey there!

If you’re looking to reduce the white space between featured collections on mobile, here’s how you can adjust the padding:

---

Option 1: Manual CSS Adjustments

1. Backup Your Theme: Start by duplicating your theme to keep a safe version in case something goes wrong.
2. Edit the CSS:
   • Go to your Shopify Admin > Online Store > Themes > Actions > Edit Code.
   • Open your base.css or theme.css file (or whichever file contains your styles).
   • Add the following CSS to target mobile screens:

@media screen and (max-width: 768px) {
    .wide-container.Shop-Teetwo { /* Adjust this selector based on your theme's structure */
        padding-top: 0px; /* Decrease top padding */
    }
}

• Preview and Adjust: Test your changes on a mobile device to fine-tune the padding.

---

Option 2: Use EasyEdits for Simple Spacing Control
If you’d rather not mess with code, EasyEdits lets you adjust spacing visually. You can reduce padding and margins with a drag-and-drop interface and see the results live. This is super handy for quick tweaks without trial-and-error coding. You can adjust it on a free trial and keep your edits, without paying anything.

---

Let me know how it works for you! Disclaimer: I’m the developer of EasyEdits, so feel free to reach out if you’d like to give it a try. 😊