My IMG is keep resizing on its own

Design help Layout & Design
1

Hello,

I have a project page where it has a text/image grouped in a div (row 1 of the div is dedicated to text and row 2 is dedicated to image).
I have bunch of these divs in a vertical list where it has ‘fade in when scrolled’ animation to each div.

My problem is when I put the image in the editor, the size looks fine but once I publish it or after making several up/down scrolls, the image becomes small automatically which I cannot figure out the reason why.

image
image1215×743 159 KB

this is the size that I want to show - flushed with the text but below is how it comes out

image
image757×382 38.2 KB

it starts with the full desirable size but after few scrolls / publishing, the size changes.
not sure if it has to do with my animation or grid… im currently using 1fr for the parent’s grid’s row.

I tried to give a set 40rem height setting and that seem to work since I hard-setted the height…but is that the only way?

I have the same animation going on with the home page project list but that doesn’t cause any trouble.

let me know if you have any other questions.
thanks guys

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

I have a similar problem with my grid setup. Setting up a fixed width (em) was the only way for me to fix the resizing.

Didn’t find a way to make a grid fully fluid yet.

A few days ago, I found this cloneable that seems to work without any fixed measures - in case I don’t oversee anything. Maybe that one helps you?

Share your read-only link if you want people to have a direct look at your build.