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

Hello, I wanted to ask if you got the solution to your problem?
I have the same problem

I haven’t unfortunately. Also have a problem with some of the slides DIV content not always sitting in the middle of the screen as it’s set. If one resizes the browser window then the content reloads and centres itself but unfortunately then closes the slides (not really the right code used in trying to rectify the problem).

The live site is here: Case Studies | Brookmans Park Tree Surgery