Set an explicit width and height on image elements to reduce layout shifts and improve CLS about awesome-adoption HOT 11 CLOSED

Hi @redxzeta . Do you have a number in mind? I can take this up as well

from awesome-adoption.

Not atm. Maybe play around with so I can see the results

from awesome-adoption.

I will update the same thread with results of different values and how they look.

from awesome-adoption.

Hi @redxzeta . I've used { width: 300, height: 200} for the images and this is the end result on different screens. Any suggestions would be great.

from awesome-adoption.

could use some spacing underneath the card top border. maybe add padding-top 10px?
I am also curious to see what it looks like if the image 100% of the cards width

from awesome-adoption.

These are images with 100% card width with padding at the top.

from awesome-adoption.

Alright how about removing the padding top?
Any thoughts so far?

from awesome-adoption.

Hi. Sorry for the late reply, yeah the top padding doesn't look good. It needs to go. I feel the 100% is good but then we will have shifts in sizes for different screen sizes.

from awesome-adoption.

i think we can go with the first option just add the padding top

from awesome-adoption.

@redxzeta Ok. I will go back to fixed width and height and add padding top. Will be creating a PR for this soon.

from awesome-adoption.

Opened PR #54 for both issues

from awesome-adoption.