CSS grid responsive image rendering

[gingerdan (Dan Griffiths)]

I have 2 issues that have recently cropped up using CSS grid.

1. Firstly when I use manual positioning the bounding (red box) for a div element, it snaps to the full grid boundary rather than the rows and column that it’s contained within. I’ve also noticed some NAN conditions in the input fields or non rounded values ie 1.989079 instead of 2.

2. I’ve been experiencing an issue with responsive images whereby the intrinsic ratio is displaying a smaller rendering form desktop than expected. I’m using CSS grid again for layout but at desktop it renders 500px rather than the larger 850px required. I’ve tried with both @x1 and @x2 original jpegs.

I’ve stripped it back to two basic examples of my set up here.
[https://preview.webflow.com/preview/kitty-draws-dogs-2?utm_medium=preview_link&utm_source=designer&utm_content=kitty-draws-dogs-2&preview=17ef1ecd33c1f545c24fe8aaf26fc13e&mode=preview](http://Preview link)

the published site can be found here https://kitty-draws-dogs-2.webflow.io/

I’ve noticed that if I put an image in the body it fixes the issue so I wonder if it is related to css grid or not.

Any help or guidance appreciated

[webdev (Jeff Selser)]

Re #2 - try placing the image inside a div with dimensions that occupies the row and column you want the image in. I believe the issue is related to the responsive calculation that Webflow uses where it is missing dimensions so it defaults to what you see.

[gingerdan (Dan Griffiths)]

Ah thanks @webdev i’ll give that a go. I’ve been using margin top % too to get a ratio image so maybe its not liking that. I’ve got that DIV set to 100%.

Do you think this is also related to the responsive image intrinsic value issue we were getting too? or is that unrelated?