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

Sky510
Excursionist
17 0 5

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

 

Screen Shot 2021-02-13 at 5.08.10 PM.png

dmwwebartisan
Shopify Partner
4550 1021 1318

@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! 

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
Sky510
Excursionist
17 0 5

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

dmwwebartisan
Shopify Partner
4550 1021 1318

@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! 

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
Sky510
Excursionist
17 0 5

@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?

 

 Screen Shot 2021-02-14 at 3.29.32 AM.png

 

dmwwebartisan
Shopify Partner
4550 1021 1318

@Sky510 

Please try the following code.

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

 

Thanks! 

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
Sky510
Excursionist
17 0 5

@dmwwebartisan No, that one didn't work.

0 Likes
dmwwebartisan
Shopify Partner
4550 1021 1318

@Sky510 

Please try the following code.

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

Let me know if this works.

Thanks! 

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
Sky510
Excursionist
17 0 5

@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 spaceFirst image with extra white spaceSecond image with 0 white space, As you can im only able to scroll in the small space below.Second image with 0 white space, As you can im only able to scroll in the small space below.Accessories products with no extra white spaceAccessories products with no extra white space

0 Likes