Responsive Social Links Card Component

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

I'm proud of not giving up at this point.

Every time I managed to get something to work, some other thing got broken.

Recreating elements based on Figma is easy but to get it to be responsive and keep it to design, turned out to be very frustrating and very time consuming.

I feel like lines like these are a little step forward:

width: clamp(20.438rem, 87.2vw, 24rem);
height: clamp(36.188rem, 63.65vh, 38.188rem);
padding: clamp(var(--s-md), 6.4%, var(--s-lg));

Overall I'm not too happy with how it came out.

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

This small project almost broke me down :|

I had a lot of problems with getting rid of media queries and at the same time keep it to design.

There is no top and bottom padding on mobile, on tablet padding is bigger and on all sides and no padding at all on desktop. At the end I had to use two media queries for that.

At first I wanted to use <ul> on links but I had issues with styling buttons and it was really annoying. Decided to use role="list" instead.

Wanted to go back to <ul> at some point when I discovered that at some particular screen sizes my buttons are overflowing and I didn't find the solution. I only added overflow: auto so there is a way to scroll when it happens

It is killing me that on my .list element gap and justify-content: space-between is not working as I would expect and I don't know why. I wanted to get rid of gap so buttons would come closer when viewport height is lower but they just overflow.

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

In case of some screen dimensions like 1280x800 my buttons are overflowing and I couldn't help it.

I wanted to use clamp() on gap but I failed.

I wanted to use space-between without a gap but it didn't work.

Didn't want to shrink buttons because on design their height is fixed.

Tried flex-shrink also but without success.