Remove/Add Padding to Slideshow in mobile view (Brooklyn Theme)

[Sky510]

Hi,

I need to add padding to the top of my slide show in mobile view and remove the excess padding underneath it. ONLY for mobile view. In the photo you will see that my slideshow picture is cut off by my sticky header. I also need to remove the extra white space below the text under my photo. Please help.

url- cielwigs.com

pw - gartew

THANKS

! 

[dmwwebartisan]

@Sky510 

Please add the following code at the bottom of your assets/theme.scss.liquid file.

@media screen and (max-width: 768px){
div#shopify-section-slideshow { margin-bottom: -100px; }
div#slick-slide00{ top: 52px; }
}

Hope this works.

Thanks! 

[Sky510]

@dmwwebartisan Thank you, but it only worked for the space underneath the text. My photo is still cut off. 

[dmwwebartisan]

@Sky510 

Remove old code and add this new one.

@media screen and (max-width: 768px){
div#shopify-section-slideshow { margin-bottom: -100px; }
div#slick-slide00{ top: 52px !important; }
}

Let me know if this works.

Thanks! 

[Sky510]

@dmwwebartisan There was a slight error in your code that I was able to fix. I successfully adjusted the padding at the top. Now the only issue is that my photo isn't the full height anymore. Anyway I can adjust that?

 

[dmwwebartisan]

@Sky510 

Please try the following code.

@media screen and (max-width: 768px){
.hero-slideshow{ height: auto !important; }
}

Thanks! 

[Sky510]

@dmwwebartisan No, that one didn't work.

[dmwwebartisan]

@Sky510 

Please try the following code.

div#Hero-slideshow {
    height: auto !important;
}

Let me know if this works.

Thanks! 

[Sky510]

@dmwwebartisan That worked! But something has now caused some padding on the first image on my product pages. Because of this im not able to scroll. However, I found that this isnt an issue on my accessories products where my images are square. So I need a code to remove the padding for only the products affected. 

Also, is there a way to enable scroll on my product images. Currently i'm only able to scroll in the small space beneath my product image. Shown in images below.

Thank you so much for all your help and patience!!!. I have very little knowledge with coding.

 First image with extra white spaceSecond image with 0 white space, As you can im only able to scroll in the small space below.Accessories products with no extra white space