How to remove padding between sections on homepage - EMPIRE Theme

Store Design
,

Topic summary

A user seeks to reduce excessive padding between sections on their Shopify store’s homepage using the Empire theme.

Solution Provided:

  • Add custom CSS through Shopify > Theme > Customize > Settings > Custom CSS
  • The CSS targets .home-section and .home-section--title elements
  • Uses media queries for screens 1024px and wider
  • Sets top and bottom margins to 1.25rem

Current Status:

  • Desktop solution confirmed working
  • User requests additional help for mobile view optimization
  • Discussion remains open for mobile responsiveness adjustments
Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
1

Looking to remove the padding between sections added on the empire theme. Not sure why they are so large. In this scenario between the banner and the feature products collection.

Thanks in advance

Screenshot 2024-11-21 at 7.42.35 AM.png
Screenshot 2024-11-21 at 7.42.35 AM.png2802×1386 727 KB

2

Hello,

Please share “Store URL”.

Thanks!

3

www.racegerman.com or testrg2022.myshopify.com either work.

4

Hi @racegermanusa

You can follow the instruction here to remove the padding :

  1. Go to Shopify > Theme > Customize > Settings > Custom CSS

  2. Copy this code and paste to the section > save

@media screen and (min-width: 1024px) {
    .home-section--title {
        margin-top: 1.25rem;
    }
}

@media screen and (min-width: 860px) {
    .home-section--title {
        margin-bottom: 1.25rem;
    }
}

Here is the result:

LizHoang_0-1732196253726.png
LizHoang_0-1732196253726.png1237×825 245 KB

5

Thank you! This worked great.

6

Is it possible to fix this for mobile view too?