Mobile First 3 Column Display

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Layout in desktop looks great as well as the mobile layout, however, responsiveness could be improve because if you resize the screen in width, the layout start to get squeezed.

  Fluffy Kas already said really great things about the layout, just going to add some as well:

  • I don't suggest using margin on the body tag to give shape to the content, I would give explicit height and width to the cards or make use of grid-template-columns to give the proper width to each of the cards if it is a grid but since it is a flexbox , I would use padding on the body tag then use flex-basis: 100% for each card, this way, all 3 card will have the same dimension.
  • I wouldn't use section for each card, since those cards are just basically related right, all of them are card example, it would be better that the section is used by nesting all those 3 cards, because it is a "section of cards"
  • The alt for each the car icons should be alt="" since those icons are just decoration. If an image is just decoration, use alt="" on them, but if the img adds content, then use meaningful alt value. Also, when using alt avoid adding words that relates to "graphic" such as "vector, image, icon...", those are already images that is why you don't need to add them.
  • Avoid using multiple h1 on a webpage, use at least only 1 h1 per webpage, so change those into h2. But every webpage needs to have 1 h1, on this one, the h1 would be a screen-reader only text. Have a look at Grace's solution, inspect the layout and see how she uses the h1 element and see the css stylings applied on it as well. You will be using a lot like this in your career.
  • learn more could be better if it was a link, since it would be like a link to "learn more" about the car.

  Other than those, great work, just the responsiveness, avoid making them to be squeezed. Still, great job :>

  0
• 

  P

  Fluffy Kas•7,715

  @FluffyKasPosted about 3 years ago

  Hey, your solution looks good! When I started coding I was all about grid. Now I'm noticing how rarely I actually use it. I still love it, it's good for centering elements easily or when I have a more complex layout but for smaller projects and when I just need to align things, I go for flexbox. At the end of the day, it doesn't matter which one you choose as long as it works without any strange "hacks", so whatever suits you. :)

  As to your solution, I'd add 2 things:

  1. Your buttons use the browser's default font-family. You need to set them specifically or they do this.

  2. If you wanted to keep your buttons from jumping around as the text changes, you could give them a position: absolute and have them fixed to the bottom :)

  0