Responsive, with Flexbix and media queries

Community feedback

• 

  P

  Ken•4,915

  @kens-visualsPosted about 3 years ago

  Hey @RyXkci 👋🏻

  I have some feedback on how to fix the accessibility and HTML issues. Also, I'll help you to fix the button.

  • First things first, all your img tags have to have an alt="" in this case it can be the name of the image such as alt="sedan". Yet in this case you should also add aria-hidden="true", because those icons are for decoration. You can read more about aria-hidden here. When you fix them, don't forget to generate a new report.
  • Next, I'd suggest using class over id. Because id always has to be unique and is not reusable, however, class isn't.
  • To fix the HTML issues, I suggest replacing <section> with <div>, for a couple of reasons. First, <section> is generally used for bigger things, such as a comment section, image gallery, etc. Second, if you're using <section> you have to have some type of heading h1-h6, but in this case you're wrapping it over <buttin>, so it's not possible to have a heading. You can read more about <section> here.
  • Let's start styling the button. You should change the padding to something like this padding: 15px 40px;. Try to use pixels or rem for padding, margin, font-size, and use perentage for width and height. Next, instead of border: none; change this to border: 1px solid transperent;. After that, change the width of .cards to 85%. And finally, add padding: 20px to .card. Those changes will make them to look as close to the design as possible.

  I hope this was helpful 👨🏻‍💻 you did a good job with the layout, it was just those minor changes to make it look even better. Cheers 👾

  Marked as helpful

  1

  ---

  

  Ricardo•110

  @RyXkciPosted about 3 years ago

  @kens-visuals Hey, thanks so much for all the help!

  You are correct about the id. I only styled one card, then I copied the html lines down and they all fell in to place..only I forgot that I temporarily set an id for the image, thanks for pointing that out! That's interesting about the image attribute, I thought that for icons and decorations it was best practice to ignore it, and I'll definitely read about the section and div! Soon, I'll attempt to do the stylings you pointed out!

  Thanks again! And what do you think of the nested Flexboxes? Good or bad idea? It makes it so much easier.

  0

  

  P

  Ken•4,915

  @kens-visualsPosted about 3 years ago

  @RyXkci you're welcome ✌🏻

  There's nothing wrong with the nested Flexboxes, it's actually a common practice to do so, and yes it's a lot easier than back in the days when layout was made with floats 🤦🏻‍♂️

  Marked as helpful

  1