Need help adjusting padding at top of section below header

Store Design
1

Hey everyone,

New to CSS and Shopify. Have just put in a custom CSS to show a different slideshow for mobile and desktop (as the images displayed too small for mobile). This works perfectly for mobile, however on the desktop version is now showing a slim white bar / padding between the top of the slideshow and bottom of the header:

ewarren_0-1730440099285.png
ewarren_0-1730440099285.png1474×118 3.93 KB

This shows only for the desktop version! What can I do to remove this? I tried reducing the padding to 0 using a new CSS but it didn’t work. The current CSS on the section is this:

@media screen and (max-width: 750px) {
.banner,
slideshow-component {
display: none;
}
}
.slideshow {
padding-top: 0;
}

I also tried updating the CSS for the header thinking the padding could be related to that but it didn’t work either.

EDIT: The gap shows for whichever is ordered “second” in the page. Eg I reordered them so the Desktop Slideshow is first and now the white gap is gone from Desktop but is present on the mobile view.

ewarren_0-1730441525789.png
ewarren_0-1730441525789.png391×586 22.1 KB

Any help would be really appreciated!

2

Hey @e-warren

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

3

@e-warren - can you please share your website link?

4

Please update the code in the mobile section to this.

@media (min-width: 750px) {
  slideshow-component {
    display: none;
  }
}

And here the code to Custom CSS of desktop section also

@media (max-width: 749px) {
  slideshow-component {
    display: none;
  }
}
5

Hi @e-warren ,

May I ask for your store URL to help you check further?

Look forward to your response.

Best,

Daisy

6

Hey Moeed, thanks for helping!

URL here

Passcode: underconstruction

It’s both on the homepage and on the “shop” page with the slideshow and image banner on each. Thanks heaps!

7

Hey @suyash1 thanks for this!

URL here

Passcode: underconstruction

It’s both on the homepage and on the “shop” page with the slideshow and image banner on each. Thanks heaps!

8

Hey @DaisyVo

URL here

Passcode: underconstruction

It’s both on the homepage and on the “shop” page with the slideshow and image banner on each. Thanks heaps!

9

@e-warren please add this css to the very end of your base.css file and check,
Shopify Admin → Online Store ->Theme → Edit code → base.css

@media screen and (min-width: 750px) {
#shopify-section-template--16456684994646__slideshow_r6XFLH{margin-top:0}
}
10

Hey @suyash1 thank you this worked for the homepage slideshow! How do I do the same for pages that have an image banner at the top that I’m having the same issue for?

11

Can you please share that page link?

12

Hey @suyash1 thanks! It’s happening here with an image banner as well as the slideshow on the homepage.

I just realised though the changes though they worked, it couldnt save so whatever I do it won’t save it! Any ideas on how to solve?

ewarren_0-1730880774832.png

13

@e-warren that space is due to margin setting for all the sections, if we remove it then it will remove top space for all the sections, will it be ok?

14

@suyash1 does that mean for all sections in the site not just the sections at the top position would have zero top space/padding? In theory could the workaround to be just make every section have more bottom padding to even it out?

15

@e-warren - workaround is css needs to be added for top section on EACH AND EVERY PAGE