Streaming live at 10am (PST)

Scaling image in pro and text description content (Lightbox)

I’m struggling with finding a solution to make the DIV with the text content to scale to the width of the image. I can make the image scale in proportion to its dimensions but need the DIV text description box below the image to scale its width to match that of the image width.

I have started off with a max-width which works ok when there’s enough screen depth but on laptops with a small depth the image scales down in size and the DIV text description box doesn’t scale.

Case Study 4 Example

Case Study 4 Problem Example

Note: I had to also put some code in that when the browser width is changed that the page refreshes itself. Without this code, the flex-boxes does not correctly align the slide content to the horizontal centre.

If anyone otherwise has another lightbox working solution with images and text descriptions being responsive then I greatly appreciate your input as well.


[1]Webflow Designer: https://preview.webflow.com/preview/bpts-v2?utm_medium=preview_link&utm_source=designer&utm_content=bpts-v2&preview=3b47ece4121ba5f464d448696baa24e8&pageId=5da0a54b46bd2ed6e9f26768&mode=preview
[2]Webflow preview: https://bpts-v2.webflow.io/case-studies