Images not displaying with padding on Chrome and Edge

Please help, I’ve been trying to sort this for a while with no luck.

I’ve got a dynamic list that if you click an item, will open a custom lightbox and disply a larger version of the image. On Safari Mac, this seems to work perfectly and the lightbox image is a good distance from the top and bottom of the screen (because of the padding around the div containing it), however, on Chrome and Edge, the image is always full size and goes off the top and bottom of the screen.

I’ve tried adjusting the image size, but as the images are different dimensions, this doesn’t work particularly well. Can anyone work out what I can do (preferably through the CSS functions) to make it work the same on these browsers?

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

Thanks for the help in advance =)

Jez


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

Hi, nice site!

I get the same, good result on all browsers on OS X.

If you get this bug in windows, try to nest the padded div into another div, nuke the padding and use margins instead.

Hey, thanks for the reply!

Unfortunately, this still hasn’t solved the problem. It’s only on PC it doesn’t display correctly. The top and bottom still go off the screen.

Has anyone got another solution to this please? It’s the last thing to do before completing the site =)

Thanks,

Jez

Resolved this. Was basically a total mess!

@vincent thanks for the help, when putting the image in another Div, it seemed to sort out sizing issues.

Thanks,

Jez

1 Like

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