Custom section margin

Highlighted
Excursionist
15 0 0

Please help!

I recently added some code called "Product Slider" from Tim (https://community.shopify.com/c/user/viewprofilepage/user-id/494748). It's a really great bit of code that allows you to add a scrolling products section on your Brooklyn home page. The only problem is that I need to adjust the top and bottom margins because they are either touching the top of the section border or the previous and next buttons are going over into the next section (see image). I've spent hours trying to overcome this but to no avail. Please, is there anyone out there who can give me the code for this?

Thanks in advance.

Dave

margin changes.png

0 Likes
Tourist
9 0 1

What is your website's address?

 

0 Likes
Highlighted
Excursionist
15 0 0
0 Likes
Highlighted
Tourist
9 0 1

If you send me the password to your storefront I'll go in and look at your web page to give you some code to fix this.

0 Likes
Highlighted
Excursionist
15 0 0
Thanks so much. It's xeitir
0 Likes
Highlighted
Tourist
9 0 1

Sorry for the late reply. Add this code to the bottom of your theme.css file:

 

.slick-slider {

    padding-bottom: 20px !important;

}

 

I'd recommend adjusting the padding value a little to what you think looks best.

0 Likes
Highlighted
Excursionist
15 0 0

Hi there, thanks for your help, but it doesn't work.

0 Likes
Highlighted
Excursionist
15 0 0

I tried moving your code to the product-slider.liquid section and added a style, and it worked

<style>
          .slick-slider {
 padding-bottom: 50px !important;
}
</style>
I tried the same code for the header but it didn't work. 50% there ;-) !
Do I need to use a different term to bring the header/title down into the section a bit?
Thanks
Dave
0 Likes
Highlighted
Tourist
9 0 1

It seems your store password has changed. What is it now? I'll post a screenshot of how to get the classes you need to edit.

0 Likes
Highlighted
Tourist
9 0 1

Also if you press CTRL+F from within assets>theme.css in the theme code editor and search for slick-slider,  the original CSS should populate and you can change it from there without having to use !important elsewhere.

0 Likes