Mobile-first design using flexbox

Community feedback

• 

  Raymart Pamplona•16,040

  @pikapikamart

  Posted over 3 years ago

  Hey, awesome work on this one. Layout in desktop seems fine, the responsiveness could be better since right now, the container shifts based on the text-wrapping right. The mobile layout could use some more width.

  Grishmita already said some useful feedback, just going to give some suggestions as well.

  • Always have a main element to wrap the main content of the page. The .container selector could have used main instead of div. This way, contents are inside a landmark element.
  • Avoid using height: 100vh on a large container like your .container selector. This limits the element's height based on the screen. Use min-height: 100vh instead, this takes full height as well but allows the element to expand if needed.
  • For this one , I would put the .attribution inside the footer tag, so your markup should look like:

  <main />
  <footer />
  

  • Avoid using multiple h1 on a page. Use only at least 1 h1, change those into h2. But in a page, you need an h1 for this one, you will make the h1 a screen-reader only text by having an sr-only stylings. This means, the text will be hidden visually but visible for screen-readers. The h1 text-content should describe what is the content of the main is all about. Have a look at Grace's solution on this one inspect it and see how she used the h1 and copy as well the styling applied on it, you will used that a lot.
  • Each car icons could use aria-hidden="true" attribute so that the image will be visible for all tech.
  • Lastly, just those that I mentioned at the beginning, the responsiveness and mobile layout.

  Aside from those, great work again on this one.

  11

  Marked as helpful
• 

  Grishmita•105

  @Grishmita

  Posted over 3 years ago

  I am not an expert but i have recently finished this challenge while. coding for frontend make sure to code the solution close to the given challenge as possible 1)padding
  2) giving height to your div 3) regarding media query just understand whats the meaning of min-width and max-width after that there is a online media query breakpoint generator which are very cool and very helpful . From that website you can surely learn about media query

  11

  Marked as helpful