Image width in lightbox isn't responsive

[Sonja (Sonja Bre)]

Hi!

I have a problem with the big/detail view of the lightbox element.
The image isn’t centered and the width doesn’t behave responsive… so it gets cut off when the screen is too small.

I noticed that the image doesn’t react when I enter a width in the image settings either.
If I type in a width it just doesn’t gets smaller (but it works with the height).
Maybe my problem has to do something with that?

I also checked if I changed something in the All Images Tag, but I couldn’t find anything.
But if I create a totally new project, everything works fine.

My read only link: https://preview.webflow.com/preview/portfolio-e25100?utm_medium=preview_link&utm_source=designer&utm_content=portfolio-e25100&preview=5d5f21e7f6566a30a6efcddd6e51fe87&pageId=5eac427f1f7a9a64bd596cac&mode=preview

The new project where everything works fine:
https://preview.webflow.com/preview/test-95f0a3?utm_medium=preview_link&utm_source=designer&utm_content=test-95f0a3&preview=b2898d6832f329e2d927716a3cdf4d01&mode=preview

Thanks for your help!

[HGWeb (Hans Gijsbers)]

Hello.
When you set the image width to 100% it should work.

[Sonja (Sonja Bre)]

Hey, thanks for your fast reply!
Do you mean in the style size? That doesn’t change anything

[HGWeb (Hans Gijsbers)]

Hello.
Go to Section_new - width 100%.

[Sonja (Sonja Bre)]

Still doesn’t work, unfortunately.

Did you try it out, did it work for you?

[Sonja (Sonja Bre)]

Some help would be amazing, its a really annoying problem… and I really don’t want to build a Lightbox from scratch on my own

[webdev (Jeff Selser)]

Looks like you styled the base figure element INSIDE A RICH TEXT ELEMENT (with no class) and Webflow uses a figure element in the lightbox. So the lightbox image inherits the custom css you defined. You should have added a class to the rich text element and then styled descending elements like a figure element, to avoid these kinds of issues.

Here is the rule that is causing the issue;

figure {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 60vw; 
  margin-bottom: 10px;
  grid-auto-columns: 1fr;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  -ms-grid-columns: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  -ms-grid-rows: auto auto;
  grid-template-rows: auto auto;
}

[Sonja (Sonja Bre)]

Thank you so much!!

I probably did that by accident, I normally give everything a class. I could delete it without it changing anything in my rich text fields. And now the Lightbox is working

Really, thanks a lot! I knew it just had to be a small, dumb mistake

[Sonja (Sonja Bre)]

Ok, unfortunately, it doesn’t fix the problem completely.
Now the image gets distorted on a smaller screen. I tried out a few things and couldn’t find the problem, again. I would be grateful if you could take another look at it!

[Sonja (Sonja Bre)]

Nevermind - found the solution myself. It’s because Display was on flex.
I honestly don’t know what I did there