Mobile & Desktop 3-Column Card / Flexbox

Community feedback

• 

  Nick Xitco•30

  @NickXitcoPosted over 1 year ago

  Great job!

  Overall some great positives:

  • The design is functional, responsive, and looks great!
  • Good use of custom properties for colors, even for simple stuff like this getting in that habit will be super helpful :)
  • The media query is functional and works brilliantly!

  Some Nitpicks:

  • Try adding a lot more text to one of the vehicle descriptions, say, doubling the length of text. See how that affects the layout? Even in its current state, the text doesn't quite line up right. Ideally, all the vehicle titles would be on the same line, and the tops of all the descriptions would be on the same line. You may want to consider defining your spacing explicitly, rather than relying on the content + space-evenly to do the spacing for you.
  • Adding an h1 to the page shouldn't be a box you simply check. It's there to help screen readers, so putting an empty h1 tag is almost more harmful than it is helpful. You can invent some text to put there which describes the page and then visually hide it (not with display: none; or visibility: hidden, you may want to look into a visually-hidden utility class, they're fairly interesting and very useful)
  • I would revisit your semantic html for this section. The main issue is that this page doesn't really have 3 "sections". It's one section, with 3 related items. I would recommend either a <section> with 3 <article>s inside, or perhaps a <ul>. You want to give some representation that these 3 items are related, and the current html doesn't do that.
  • Because of the above point, you've made your life a bit harder with the border radius. You may benefit in the future from sketching out where your containers are on the page. In my mind, this isn't 3 separate containers, with the outer two having their outside corners rounded, it's 1 container with all four corners rounded. It'd make your classes much simpler too, that way you're just using the class for the color.
  • As it stands, this design is responsive, but typically, adding fixed widths/heights to things is bad, especially in pixels, as it restricts both you and your users if you have to change the section in the future or if your users change their text sizes. In the future, fill in the blanks between the two breakpoints and see as a designer what you'd want the section to look like!

  Marked as helpful

  0

  ---

  

  Kirsten ✨•460

  @ofthewildfirePosted over 1 year ago

  @NickXitco Thank you so much for all this detail. I will read it all again and implement all these changes, thank you so freaking much <333

  1