Any way to adjust thumbnails in a lightbox?

wish they could be smaller and a bit further away from main image. just curious… :slight_smile:

Hey @scottbarbey,

Have you tried adding a 20px margin to the image?

Let me know how it goes.

Naweed

Hi Naweed -
Appreciate the quick response. You guys and gals are really awesome.
Your idea sounds exactly like what I want to do… but how.

Lightbox mode seems to have no real “editing features” (see attached screen cap)
get the distinct sense I’m missing something obvious… which happens often w/ me. :slight_smile:

Hey @scottbarbey,

You’re welcome - We’re happy to help!

Can you share your read-only link so I can test my theory :wink: - Share a read-only link | Webflow University

Sorry 'bout that.
share is here: https://preview.webflow.com/preview/scottbarbey70956011502405-faeda8a64b324?preview=8b7171529f6bc404f61f3dd47299c65c

looking to adjust the thumbnails on all my light boxes on my PHARMA page. Everything else is AOK.

It’s alright.

Can you check the link please, it’s returning an error page.

https://preview.webflow.com/preview/scottbarbey70956011502405-faeda8a64b324?preview=3bfc024f0b1d699e7f3a4e88191c6670

should work… hopefully.

Hey @scottbarbey,

my solution for this was, that is used a div with background-image cover. So all my thumbnails have the exact same size and looking pretty well.

Here as example a read only link of an actual page of mine.

best,
maurice

Worked perfect, thank you.

Just for my clarification, do you mean the thumbnails in this screenshot?

yup.
in each of the projects on that page, there’s a lightbox like this. would love the thumbnails to be either smaller, or bit further away, or both… :slight_smile:

Would also love to understand the witchcraft involved in adding a margin. No idea where or how to do that.

thanks!

Before writing my last post to you, I added some margin to the pharma page, some white space keeps me sane (too bunched up together before) :wink:

To resize the thumbnails, you’d have to copy and paste the css class in your site custom code and adjust the height from 10vh to 5vh or whatever you feel like. To find the css class, open the pharma page lightbox in chrome, right click the thumbnail and click inspect (developer tools must be enabled in your browser).

Interesting.
I may add more white between the projects on Pharma and TV pages. been thinking about that. :slight_smile:

As for the Chrome editing - bit confused - I do this in “preview mode” (blue “eye” view).

Think I may understand. I’ll give it a shot.

thanks!

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.