Social Links Profile Solution

Community feedback

• 

  KapteynUniverse•2,170

  @KapteynUniversePosted 6 days ago

  Clamp is one way like you suggested. You can also combine min and calc together.

  .card {
  .
  .
  .
      /* padding: 40px 28px; */
      padding-block: min(calc(100vw / 20), 40px);
      padding-inline: min(calc(100vw / 40), 20px);
  .
  .
  .
  }
  

  This means padding block (top-bottom) and inline (right-left) will be max 40px-20px but when 100vw/20-40 is smaller than 40px-20px, which is below 800px screen size, padding will be at that value. At 600px 30px-15px for example.

  I think you don't need to set role=main since you already used main landmark.

  Using max-width is nice, i also recommend you to use rem and a modern css reset or you can check Andy Bells reset too.

  Marked as helpful

  1

  ---

  

  pchalaia•30

  @pchalaiaPosted 6 days ago

  @KapteynUniverse oh, thank you! Calc() function has always put me off because of the possibility of decimal values, as different browsers might handle them differently. (Or is it not the case for modern browsers anymore?) But for the padding example, that would definitely work well!

  0

  

  KapteynUniverse•2,170

  @KapteynUniversePosted 6 days ago

  @pchalaia I don't know actually, but they both have around the same browser support and it is very high. Clamp also has possibility of decimal values too.

  I think I used min instead of clamp only once, and that was for a hover effect where an element's width changes to fixed values based on two different media queries. Since it was a tailwind project, element was easy to make but before-after pseudo elements are not supported in tailwind so i had to write hover effect in the css file but i didn't want to write a separate media query just for the hover effect.

  There are also clamp calculators which makes it easy to use it.

  Oh it was 6 in the morning when i wrote the first feedback. Now i realised i saw 28px as 20px :D

  0
• 

  jardellprod•70

  @jardellprodPosted 6 days ago

  I like how you modified the information provided to make it more personal. You also made the buttons hyperlinks I think that's actually pretty cool.

  I think you succeeded in completing the project !

  You also did a great job using max-width for the card size, this really made everything much more responsive. Also great use of the clamp function to size the text accordingly.

  Marked as helpful

  0