@geomydas
Posted
No need to use clamp for padding here. The padding doesn't change on from desktop to mobile or mobile to desktop in the design
@MarenOelixtown
Posted
@geomydas / Without having the Figma file, I thought to see a small difference in the design templates, but anyway.... thanks for pointing it out to me.
@SabineEmden
Posted
I agree with @geomydas!
If you compare the desktop layout with the mobile layout, you can see that on desktop the social links are slightly wider than the paragraph directly above them. On mobile, the width of the links is closer to the width of the paragraph. That is, going from desktop to mobile, the width of the card shrinks to fit the smaller viewport width. The padding doesn't change.
Your section element is already a flex item. The defaults of flex-direction: row on the flex container and flex-shrink: 1 on section should give you the shrinking behavior of smaller viewport widths.
You used max-width: 384px on the section element. I used flex-basis to set the width. You could also use width. I'm not sure how max-width works on a flex item. I would have to look that up.
You may want to use rem for the width, not pixels. This would allow the section element to get wider, if the user changes the font size in the browser settings. That's up to you. I tried it in my browser, and the very large font size did not break your design.
