Four card feature section using only CSS flexbox

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Excellent work on this challenge, Alexis! Your solution looks great! 👏

  For responsiveness, I highly recommend writing the styling using the mobile-first approach. It often leads to shorter and better performance code. Also, mobile users won't be required to process all of the desktop styles.

  Use single class selectors for styling whenever possible instead of id. id has high specificity which can lead to a lot of issues on the larger project. Also, it's best to keep the CSS specificity as low and flat as possible. 😉

  I recommend swapping the header element inside the main element with a div. It may cause confusion for users of assistive technology (even though it has no corresponding role).

  "Reliable, efficient delivery powered by technology" should be wrapped by a single element. This way, it would be read by the screen reader as one sentence which in my opinion makes more sense than as a separate sentence. So, I recommend wrapping it with one h1 element.

  I hope this information is useful! Keep up the excellent work! 👍

  Marked as helpful

  1

  ---

  

  Alexis Lienard•150

  @Al-lienPosted over 2 years ago

  @vanzasetia

  Hello Vanza,

  Thanks a lot for taking this much time to help me, I really appreciate

  So you recommend that I write the css files for mobile first, then use media queries for desktop ?

  "Reliable, efficient delivery powered by technology" , should I use <span> inside <h1> to modify the font style ?

  I’m going to follow all your advice and change my code

  Once again, thanks so much for your feedback See ya !

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @Al-lien No problem! 👍

  Yes, start writing the styling for the mobile layout first and then use media queries to style larger screen sizes.

  Yes, use span to style the text.

  Good luck!

  Marked as helpful

  1