Responsive preview card - media queries + clamp()

What are you most proud of, and what would you do differently next time?

I’m pretty proud of how I handled the layout changes for different screen sizes. It wasn’t just a simple clamp() fix — the design needed the component to start small on phones, get bigger by tablet size, then shrink a bit, and finally grow again on bigger screens.

It was kind of tricky, but I made it work by mixing @media queries with clamp(). The layout feels smooth and responsive, and it really matches the Figma design closely.

Next time I will commit more often in Git, and be more intentional with it. Like, really think about what each change is doing to the layout or visuals, and pick a commit message/label that fits.

What challenges did you encounter, and how did you overcome them?

Like I said before, making the layout work well on all screen sizes was tricky.

Another thing that bugged me was this huge gap showing up under the <footer>. I was honestly almost frustrated trying to figure out what was going on.

Turns out, it’s just how browsers behave when the page content is smaller than the screen height — I knew this already, but totally blanked on it with everything else going on. After like two hours of debugging and comparing with my old projects, I finally cracked it.

Funny how sometimes the simplest stuff ends up being the hardest to remember!🤦‍♂️

What specific areas of your project would you like help with?

If anyone has tips on handling responsiveness more effectively, I’m all ears! Same goes for my mixins — if you see anything I could improve or clean up, let me know. Any trick or suggestion is totally welcome and appreciated 🙌