huge padding at the top of homepage but cannot find anywhere in my CSS

Store Design

Topic summary

Homepage slideshow shows a large gap above the image due to a CSS rule on the slides element (padding-top: 56.25% on #flexslider… .slides). The original poster couldn’t locate this rule in theme files.

A contributor suggested overriding padding with custom CSS in theme.scss.liquid: ul.slides.supports-js { padding: 0 !important; }, main#MainContent { padding: 0; }, and .index-section.slideshow-section { padding: 0; }. This resolved the excessive top space.

After applying the fix, the “Shop New In” CTA (call-to-action) appears as a large button below the banner instead of overlaying on the banner. A screenshot was shared to illustrate the issue.

The requester prefers the entire slideshow to be clickable rather than using a large CTA beneath it and asked how to implement that and why the CTA moved below the banner.

Status: padding issue addressed; CTA placement and making the slideshow clickable remain unresolved. Awaiting further guidance or code adjustments.

Summarized with AI on February 14. AI used: gpt-5.
1

Hello,

I have been trying for days to get a different size image on sldieshow for mobile and desktop, I have implemented one that seems to be working however there’s now a huge gap above it on the homepage.

When I web inspect it it says this:

#flexslider–165665430094715824 .slides

padding-top: 56.25%;

I obviously need to remove this 56.25% as when I un-tick it in web inspector it goes.. but I cannot find it in any of the sections to remove when I search for it??

Please can someone help

Preview of the test site is here:

https://m8npijvo7n53lq5z-53389099201.shopifypreview.com

2

@AngelCompany1 ,

ul.slides.supports-js {
    padding: 0 !important;
}
main#MainContent {
    padding: 0;
}
.index-section.slideshow-section {
    padding: 0;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->theme.scss.liquid

1 Like
3

OMG thanks so much!!!

The only thing is the CTA “shop new in” is in a massive block below the banner instead of being on the banner which is so weird!!!

Screenshot 2022-07-07 at 10.25.03.png
Screenshot 2022-07-07 at 10.25.03.png2880×1636 412 KB

4

I would rather the slideshow just be clickable than this huge massive CTA button below, would you know how to do this? I don’t know why its below the banner its so weird