Responsive Card

Community feedback

• 

  Raymart Pamplona•16,040

  @pikapikamart

  Posted over 3 years ago

  Hey, awesome work on this one. Desktop layout looks fine but the layout needs to be bit bigger so that it matches the design. It is responsive and the mobile state looks I think, but the font-size could be bigger as well for better reading.

  Some other suggestions would be:

  • Don't use width: 100vw or min-width: 100vw since this will only add a horizontal scrollbar at the bottom, since this value does not account the vertical scrollbar's width.
  • Avoid using height: 100vh on a large container like the body as this makes the element's height capped based on the viewport/screen's height. Instead use min-height: 100vh so that the element will expand if it needs to.
  • Also to center the layout properly, on the body tag you could add these:

  align-items: center;
  display: flex;
  justify-content: center;
  

  • Only have a single h1 on a site. It would be great to change those headings into something like h2.
  • On a site, always have a single h1. Since there are not visible text that are suitable to be h1, the h1 would be a screen-reader only heading. Meaning it will be hidden visually but present for screen-reader users. On this, the h1 would have like sr-only class and the text-content should describe what is the main-content is all about. The h1 could be placed as the first text inside the main.Have a look at Grace's solution on this one inspect the layout and see the usage of h1 as well the stylings applied to it.
  • 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.
  • Those learn more is much better using a tag rather than button. On a real site, those would act as a link that directs a user to a page where they can "learn" about a specific car.

  Aside from those, great job again on this one.

  11

  Marked as helpful