social links profile using css only

Community feedback

• 

  P

  Koda👹•3,830

  @kodan96Posted 5 months ago

  hi there! ✌️

  Couple of tips:

  HTML:

  • all HTML document should include one h1 element (but not two or three. only one)

  CSS:

  • basically you don't need to specify the width of your elements. containers will adapt to their content by default. you can use max-width to determine the maximum width of your element. you can even combine it with width:

  .element {
    width: 90%;
    max-width: 40ch;
  }
  

  in this case the element will take up 90% of its container's width, but when it reaches 40ch it won't expand above that.

  • you're still mixing pixels and relative units, get used to using relative units all around your CSS, especially don't use pixels for the font size.

  Hope this was helpful 🙏

  Good luck and happy coding! 💪

  Marked as helpful

  1

  ---

  

  Alexander Sanchez G.•90

  @AlexSG29Posted 5 months ago

  @kodan96 Thank you very much for the feedback, I am still learning how to use the rem, I understand that it adapts according to the size of the screen.

  html { font-size: 16px; /* 1rem = 16px */ }

  body { font-size: 1rem; /* 16px */ margin: 2rem; /* 32px */ }

  I certainly hope that future designs have better management of dimensions

  1

  

  P

  Koda👹•3,830

  @kodan96Posted 5 months ago

  @AlexSG29

  You're right with the math, but there's no need to apply that font-size to the html tag, 16px is the default font size in browsers. apply font-size to the html tag only if you want to modify the default.

  and no, rem won't adapt to the screen size. only if you modify the font-size property in your @media queries. if you want dynamic typography, that's actually adapts to the screen size automatically you need to use the clamp() CSS function

  Marked as helpful

  0