Responsive Social Links Profile using Grid

Community feedback

• 

  Alex•3,130

  @Alex-Archer-IPosted 5 months ago

  Hi!

  Congrats with another challenge. That's a cool one, well done =)

  Here are a couple of suggestions =)

  The nav tag's purpose is to serve for navigation through the page or the site. So, it doesn't really fit here. Also there is a list of links, so it's better to use ul tag with li.

  <ul>
      <li><a href="#">It's a link here!</a></li>
      ...and more links here
  </ul>
  

  There is not necessary to wrap p or img in the other tags. You can style it directly. It could be more simplier layout here.

  <img src="" alt="">
  <h1>Jessica Randall</h1>
  <p>London, United Kingdom</p>
  <p>"Front-end developer and avid reader."</p>
  <ul>
      <li><a href="#">It's a link here!</a></li>
      ...and more links here
  </ul>
  

  Oh, and why do you apply font: inherit for every selector? I studied your css but can't find where it could be useful (but maybe I can't catch something =)).

  Marked as helpful

  0

  ---

  

  P

  Jordan•80

  @jdgarcia277Posted 5 months ago

  @Alex-Archer-I Thank you for the advice! I'll work on making those changes.

  Regarding the last point, font: inherit; is part of my CSS reset sheet that I use. From what I understand, it's mainly beneficial for form elements because they don't inherit font properties from your CSS by default and instead use the browser's stylesheet. While this page doesn't have any form elements, I include this rule as a best practice to ensure consistency and prepare for when these elements are used in the future.

  0

  

  Alex•3,130

  @Alex-Archer-IPosted 5 months ago

  @jdgarcia277

  Oh, I oversighted that you declared font-family and font-size at the root! Now it has much more sense =)

  It is a most interesting use of clamp I have seen this far! I just trying to find good clamp patterns. Guess I should follow you now.

  And I forgot to tell you that it's recommended to add role="list" to ul and ol tags if you change their display or appearance, cos Safari screen readers have issues with recognizing them.

  By the way, I wonder if declaring font-size in a root is a good idea? I mean root takes this value from the browser settings. And what happened if user change them? Will your value overwrite browser's or be overwritten? Hm...

  0

  

  P

  Jordan•80

  @jdgarcia277Posted 5 months ago

  @Alex-Archer-I

  I completely overlooked the side effects of declaring font-size in root. From what I could find, declaring this will over-ride browsers and users. So if a user uses a larger font size for accessibility, this would be taking that away from them. There are some tips in this css-tricks article that I'm going to use from now on. I'll have to adjust my clamp calculations a bit, but that's not a big deal.

  Thanks for pointing this out! Learning a lot of new things today.

  0

  

  Alex•3,130

  @Alex-Archer-IPosted 5 months ago

  @jdgarcia277

  That's interesting article, though I really suggest you not to use the 62.5% trick. Sorry, right now I can't find source about issues it creates. I'll search for it later. Besides, I can't see how using clamp with rem units into the body contradicts the core idea of this article. I mean we still use values which depends on user's setting.

  Anyway, thank you too =) I learned new things too. That's why I like this place - you can find cool people, learn something and help someone =)

  Oh, maybe this would be help for clamp calculations =)

  0

  

  Alex•3,130

  @Alex-Archer-IPosted 5 months ago

  @jdgarcia277

  Ok, I can't find the article I read once, but I've found something better and get a few tips for myself from there =) Here the part about 62.5% thing.

  0