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.
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
Webflow preview: https://bpts-v2.webflow.io/case-studies