Responsive page using HTML/CSS

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, great work on this one. Desktop layout looks fine but needs the layout to be centered, site is responsive but your breakpoint for mobile at 1062px is too big for only the mobile layout to show, desktop layout could use more of those.

  Some other suggestions would be:

  • Using margin on the .main-container to center it is not consistent enough. Instead of using margin you can remove that and on the body tag add these stylings:

  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 100vh;
  

  • Though upon doing that, the layout is still not centered, because you are only using width: 30% for each of the car-items. Instead on each of the .car selector, replace the width by flex-basis: 100% and remove the flex-wrap on the .main-container since flex-wrap is being used incorrectly on this one.
  • Also, the .attribution would be great if it were outside the .main-container and is using footer so that it will be its own landmark.
  • Always have a main element to wrap the main content of the site. For this use main tag on the .main-container selector.
  • Those car icons are only decoration so hide them. Decorative images should be hidden for screen-reader at all times by using alt="" and aria-hidden="true" to the img tag or only aria-hidden="true" if the image is using svg.
  • Only use descriptive alt on images that are meaningful and adds content to the site otherwise hide the image for screen-reader users.
  • When using img tag, you don't need to add words that relates to "graphic" such as "icon" and others, since img is already an image so no need to describe it as one.
  • When making a text uppercase, do not directly type the word in the markup capitalized. Doing this results screen-reader reading the text letter-by-letter and not by word. Instead just use regular lowercase text and just use text-transform: uppercase on it on the css.
  • learn more is better using a tag rather than button since on a real site, those would be page-link where the user can "learn more" about a specific car.
  • Lastly, if you follow those stylings, make sure to adjust for mobile layout since those are only for desktop.

  Aside from those, great job again on this one.

  Marked as helpful

  0
• 

  0xSTVNDZ•30

  @0xSTVNDZPosted about 3 years ago

  Thank you. This was very useful information going forward. I applied all the changes except for adding another media query for sizes 600-1000px (will do in future). Much appreciated.

  0