Responsive Social Media Card Html Css

Here are some simple tips on when to use rem or any other units

rem: font-size, paddings, margins; px: border-radius, border, box-shadow (generally the small stuff); em: letter-spacing;

CSS Units Guide: https://www.youtube.com/watch?v=N5wpD9Ov_To;

Writing more efficient css

1. Just use SASS
2. Use native CSS Nesting
3. Use CSS Variables

HTML Code Critique.

1. Geez, too much divs. Use main, section and other semantic elements.
2. <p> elements nested in .social should be changed into a <button> element

CSS Code Critique

1. Need a CSS Reset. (makes your code look the same no matter what browser). Use this one: https://www.joshwcomeau.com/css/custom-css-reset/;

2. This challenge doesn't even need a media query. No need for changing the width on mobile. Use padding on the parent element (body) and set both width and max-width on the card. The width should be in responsive units (% is best), and the max-width should be in fixed units (px)