Lightbox gallery thumbnails showing as invisible. Help?

SOLVE
BillOxygen
Participant

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
Kevin-C
Solution
Recognized Expert

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
sharonlicari
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


¿Sabías que la Comunidad está disponible en Español?
¡Participa hoy en conversaciones en el idioma de tu preferencia,cambiando el idioma en tus configuraciones!

Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings !


0 Upvotes
Kevin-C
Solution
Recognized Expert

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

BillOxygen
Participant

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

0 Upvotes