Refresh Theme: Gap on top/bottom of Hero Image Slider

Technical Q&A
, ,

Topic summary

A user is experiencing unwanted vertical spacing above and below a Hero Image Slider on desktop (not present on mobile). An attached screenshot shows the gap issue.

Proposed solutions:

  • Check theme settings: Look for padding/spacing controls in the Hero Slider section of the theme customizer and reduce top/bottom values for desktop.

  • CSS override: Add media query targeting desktop (min-width: 1024px) to set padding-top, padding-bottom, and min-height to zero/auto with !important flags on .hero-slider and .hero-slide classes.

  • Fixed height issue: Another responder identified that custom CSS setting the slider to height: 75vh may be causing the gaps, suggesting this fixed height is a root cause.

The issue remains unresolved, with participants requesting the theme name or homepage link for more specific guidance.

Summarized with AI on October 25. AI used: claude-sonnet-4-5-20250929.
1

Hello! We have a Hero Image Slider on the homepage displaying a product, but there’s a large gap above and below the content on desktop:

image
image1691×1171 169 KB

How can I remove that spacing? There’s no gap on mobile.

Thanks.

1 Like
4

Hi @bearshop

The extra space above and below your Hero Image Slider on desktop is most likely coming from top/bottom padding or a fixed min-height setting in your theme’s desktop CSS.

Here’s how you can fix it:

  1. In your theme customizer, open the Hero Slider section and look for padding or spacing controls. Reduce the top and bottom values for desktop.

  2. If there’s no direct setting, you can override the CSS by adding:

@media (min-width: 1024px) {
  .hero-slider, .hero-slide {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: auto !important;
  }
}
  1. Save changes, refresh your site in an incognito window, and check if the gap is gone.

If you share your theme name or a link to your homepage, I can point you to the exact CSS selector causing the space.

Best

Nobble

1 Like
5

Is this the code you’ve added?

.hero-swiper {
  width: 100%;
  height: 75vh;
}

This makes the section fixed height and one of the reasons for the gaps.

if my post is helpful, please like it and mark as a solution -- this will help others find it
1 Like