Streaming live at 10am (PST)

Custom Lightbox image not sizing to screen


#1

Please could someone help me, I've been fiddling with this for ages...

I've created a custom Lightbox, but I can't get the image and description it should display to fit the proportions of the window. The image seems to be fitting relative to the entire web page, rather than the visible screen.

@cyberdave, thanks for your help so far on this, but can you help me with my new query?

I'm trying to display an image with information next to it. The images need to be different dimensions, but keep the info the same size to the right. I've tried everything, please please help! =)

https://preview.webflow.com/preview/dustproof-design?preview=77074fa7bffcb56aef7f1bf893d46be0

Thanks,

Jez


Here is my public share link: LINK
(how to access public share link)


#2

Your public link is not working, can you re enter it please?


#3

Sorry, link should work ok now =)


#4

Your site structure is really hard to figure out honestly. I can't get the lightbox to show in the editor at all. I suggest using flexbox for your lightbox and content if you must use a custom solution. Otherwise why not use the built in lightbox component?


#5

Thanks @DFink

Yeah, worry, a more detailed explanation would have made it easier to decipher where the elements I'm talking about are.

I'll put something together as a demo to simply illustrate the problem, rather than using it in the site.

Thanks for taking the time to look at this.

Jez


#6

https://preview.webflow.com/preview/test-site-c49647?preview=79df782513444f3dda5cf1f4b0fab601

Here is a quick test I've produce to show the problem.

I need to keep the white panel the same size (Lightbox Info), but the image (Lightbox Image) needs to work at different dimensions. As you can see from the link, the red image is so tall, it goes off the screen. I need to be able to have images at whatever height remain in the window with 80px padding around the screen.

Hopefully this makes more sense =)

Thanks,

Jez


#7

It's gonna be kind of hard to get that to work exactly the way you want without using flexbox. Again, why not use the built in lightbox component? It is completely responsive and allows text to be entered.


#8

Thanks @DFink I have worked it out!

Check out http://www.dustproofdesign.com, it works perfectly.

Flex box was correct - needed to change it to stretch then add padding, and yes I was considering the Webflow Lightbox, but wanted it personalised to my site.

Thanks for your help and taking the time to take a look =)

Thanks,

Jez


#9

It looks good on desktop but it squishes the image horizontally on smaller devices.


#10

Thanks, will be amending responsiveness in due course. Will stick it up on the Feedback section when it's done too!

Thanks again for all your help!

Jez


#11

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