Help reducing padding on Empire on Desktop and Mobile

Store Design
, , ,

Topic summary

Goal: Reduce excessive padding/spacing around a slideshow and a custom HTML image in the Shopify Empire theme, especially on mobile.

Key context: The issue appears between a slideshow section (top) and a custom HTML section (bottom). Screenshots for desktop and mobile illustrate large gaps; a follow-up screenshot shows the fix.

Solution provided: Add CSS to theme.css to remove unwanted spacing:

  • Set margin-top: 0 !important on .custom-html–container and .custom-liquid–container.
  • Set margin-bottom: 0 !important on images within the custom HTML container (selector used: section. custom-html–container img).

Outcome: The updated CSS visibly reduces the padding/gap (confirmed by the after screenshot). The original poster confirmed the fix worked.

Status: Resolved. No further changes or open questions noted.

Notes: Images (before/after) are central to understanding the visual spacing issue and its resolution.

Summarized with AI on January 2. AI used: gpt-5.
1

I need help reducing the padding on Shopify Empire theme. The top picture is slideshow, and the bottom picture is just a custom HTML that has the image. It is worse on Mobile as you can see.

Thank you in advance

Desktop

Screenshot 2024-03-27 at 3.56.23 PM.png
Screenshot 2024-03-27 at 3.56.23 PM.png2038Ă—1600 590 KB

Mobile.

IMG_5F2660A9F188-1.jpeg
IMG_5F2660A9F188-1.jpeg1179Ă—2556 301 KB

2

Add this code in your theme.css file:

.custom-html--container, .custom-liquid--container {
  margin-top: 0 !important;
}

section.custom-html--container img {
  margin-bottom: 0 !important;
}

Result:

result.PNG
result.PNG355Ă—639 221 KB

3

Absolutely amazing. Thank you so much.

1 Like