Streaming live at 10am (PST)

Custom lightbox image Gallery with CMS


#1

Hey everyone, i am in a strange situation here.

A client required a cms photo gallery, i searched the forum and found a solution for custom lightbox.
I created a custom lightbox with click interactions to open and close the pictures. No arrows to change from one to another yet.

The problem is that landscape pictures look fine (but still get cut on some screens), but the portrait ones exceed the height of the screen.

I created a fixed section 100% x 100%. and placed the dynamic list inside it. used a div to adjust the width and that happened.

I already tried using height as a % measure but it does not affect the size of the image.

I need to limit a height to make portrait and landscape pictures show on all screens.

Can you please help me with this one?

Thank you

The preview link, i have it public on my profile.

the way to the page: SERVICOS > FOTOS > PRE WEDDING
https://preview.webflow.com/preview/ferrari-prod?preview=fa2a1dc13f00a9ac79c7344b068004da

Images showing my problem:

Landscape after clicking:

Landscape before Clicking

Portrait after clicking

Portrait before clicking



#2

Hello, @FredFort.

You can add max-height to the image equal about 93 vh.

VH is a measurement, dependent on viewport height. 1 vh = 1% of browser height.
Same is VW, but dependent on the browser width.

For adding these measurements just type vh or vw next to the size numbers, without space.

Regards,
Anna


#3

Hi, @sabanna

Its worked on my webflow edit screen and preview on the edit tool, but when i publish and try in
on the webflow.io domain, it still the same, i tested on a few screen sizes and on the smaller one like 13" and 15" it still cuts like i did not change anything. even when clearing the cache.

i tested on google chrome.

Have you seen this before?


#4

On published site Images doesn't have set max-height property. Try unpublish site and publish it again.

Let me know if it will help.


#5

Thank you soo much @sabanna, you saved my life on this one, and showed me something that i am sure i will use a lot more in the future.

Thanks, you rock


#6

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