Responsive Design using mobile first approach and Flexbox

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hello there 👋. Good job on completing the challenge !

  I have some suggestions about your code that might interest you.

  Use classes, if you have many element selectors like "main section div h2" it can be very difficult to know which element you are selecting, even in SASS it is not recommended to use too much nesting due to the specificity of the selectors.

  HTML 📄:

  • You must use a level-one heading (h1) even though this is not a full-page challenge. You can create an '<h1>' element within your 'main' element that will be hidden visually but visible and readable by screen readers. The class "sr-only" hides content visually and here are the styles to copy. e.g.: <h1 class="sr-only">QR Card Component</h1>

  CSS 🎨:

  • Instead of using pixels in font-size, use relative units like em or rem. The font-size in absolute units like pixels does not scale with the user's browser settings. This can cause accessibility issues for users who have set their browser to use a larger font size. You can read more about this here 📘.

  I hope you find it useful! 😄 Above all, the solution you submitted is great!

  Happy coding!

  Marked as helpful

  1

  ---

  

  Cindy Kandie•100

  @cindykandiePosted almost 2 years ago

  @MelvinAguilar I highly appreciate your feedback and response to my question, in fact, I have learnt something new from the sr-only styling and I even implemented it. I am surprised I had no clue about it, turns out accessibility is much bigger than I think. Thanks again for taking the time to give me feedback and congratulations on your rating on this platform. You are truly amazing

  0