Responsive Flexbox Layout

Community feedback

• 

  Elena•30

  @ElenaUJPosted about 2 years ago

  Hi! Great work!

  I just completed this challenge a few days ago (I'm a beginner, too :) ), and your solution came up in my feed. To fix the issue with the changing of container size, try to add the border to the button design (if it's the same color as the button background it will be invisible). Then, upon hover, only change background and font colors. Like this, the button doesn't change size, and the parent container shouldn't either.

  Let me know if that works!

  Elena

  Marked as helpful

  0
• 

  Chiemeka Okongwu•550

  @Chiemeka2006Posted about 2 years ago

  Niecee Project!!!

  Marked as helpful

  0
• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted about 2 years ago

  Hi @modade97 👋, good job completing this challenge, and welcome to the Frontend Mentor Community! 🎉

  I have some suggestions you might consider to improve your code:

  • The <h1> element is the main heading on a web page. There should only be one <h1> tag per page. The HTML Section Heading elements (Reference). This case requires that SUVS, SEDANS, and LUXURY be <h2> elements.

  • Car icons are for decoration purposes only, so they can be hidden from screen-readers by adding aria-hidden="true" and leaving its alt attribute empty:

  <img src="./images/icon-sedans.svg" alt aria-hidden="true">
  <img src="./images/icon-suvs.svg" alt aria-hidden="true" >
  <img src="./images/icon-luxury.svg" alt aria-hidden="true" >
  

  • Your component grows because you add 2px of a border to a button that previously had no border

  Above all, the project is done well👏. I hope those tips will help you! 👍

  Good job, and happy coding! 😁

  Marked as helpful

  0
• 

  Modade•100

  @modieeePosted about 2 years ago

  @MelvinAguilar and @ElenaUJ, thank for your hint on the boder 2px i added to the hover, i have edited it and it works, and @MelvinAguilar thank you for your tip on arial-hidden="true" it came in handy on another challenge i did as well: https://modade97.github.io/four-card-feature-section.

  0