nerometa

You could do that. What I'm gonna say here might not be the best solution though:

Hardcode width and height of your card and use @media query to hardcode yet another width and height properties when your screen got smaller or bigger.

You could also use min(), max() and clamp() to do sizin. It might work a bit better.

First of all, that was great. Your design is pretty similar to the challenge's design. I might have to checkout PixelPerfect that you using though. It's interesting.

I think when it comes to transferring idea to code, you might have to do some UX/UI design beforehand like these challenges provide you. You can literally see how your code will look like on it.

Maybe you cannot 'see' how the page are structured. I think learning more about different HTML tags and what and how they're use is crucial here.

Maybe you don't know some of CSS properties. That explains you fiddling in dev tools, which I suggest you go check out CSS guides here: https://css-tricks.com/guides/ or you might have to learn the basics more.

I guess you're new to coding. This is good enough based on your experiences. Now, several things I want you to fix and I know you can do it:

• Your card and image border radius. % unit is too much. Use px unit on it will look far more similar to the design.
• You can group your 2 paragraphs together, then apply padding to it. This is more consistent and I think it's pretty responsive. If you worried about paragraph spacing, you can still add top or bottom padding to each paragraph.
• Card height and width can use other responsive units such as % or vw for width and vh for height. Fixed units like px is hard to do responsive design.