Lightbox gallery thumbnails showing as invisible. Help?

SOLVE
Highlighted
Occasional Contributor

Hello everyone - I am trying to create a lightbox gallery in the below link

Right now I have the below module code in the page:

{% module "module_160297594105741" path="@hubspot/gallery", label="gallery.module" %}

 

The SLIDER and THUMBNAIL gallery appear JUST FINE, but when I select LIGHTBOX gallery, the thumbnails are invisible. If you visit the below page, you will see below the text there are thumbnails to hover over (the mouse cursor changes) but they aren't showing. Can anyone help or tell me what might be wrong? Thank you!

 

https://blog.boostoxygen.com/boost-oxygen-review-by-stamford-advocate

0 Upvotes
1 Accepted solution

Accepted Solutions
Highlighted
Solution
Regular Advisor | Partner

Thanks for the tag @sharonlicari 

 

Hey @BillOxygen 

 

Looks like you've got some padding pushing the image dow out of view. See image below:

Screeenshot - 2020-10-19 at 8.29.58 AM.png

 

Try editting the class ".hs_cos_gallery_thumbnails .slick-slide .slick-slide-inner-wrapper" or adding this css:

 

.hs_cos_gallery_thumbnails .slick-slide .slick-slide-inner-wrapper {
  padding-top: 0px!important;
}

View solution in original post

3 Replies 3
Highlighted
Community Manager

Hey @BillOxygen 

 

Thank you for reaching out and the information provided. I'll tag a few experts that can share their thoughts with you. 

 

Hey @Kevin-C @Alex_ @thesnappingdog what would you advise in this case?

 

Thanks

Sharon


We are excited to announce that the Community will be launching a weekly newsletter on November 2, 2020!
Sign up today!
0 Upvotes
Highlighted
Solution
Regular Advisor | Partner

Thanks for the tag @sharonlicari 

 

Hey @BillOxygen 

 

Looks like you've got some padding pushing the image dow out of view. See image below:

Screeenshot - 2020-10-19 at 8.29.58 AM.png

 

Try editting the class ".hs_cos_gallery_thumbnails .slick-slide .slick-slide-inner-wrapper" or adding this css:

 

.hs_cos_gallery_thumbnails .slick-slide .slick-slide-inner-wrapper {
  padding-top: 0px!important;
}

View solution in original post

Highlighted
Occasional Contributor

Thank you so much for your help! We removed the padding and it worked perfectly! We appreciate the quick response!

0 Upvotes