I used display grid and flex

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Layout looks great in desktop, currently it is not responsive, you can inspect the layout in dev tools then try to change the screen's width, the content are being hidden thus creating horizontal bar. Mobile layout looks good but using 360px breakpoint is too small, lots of mobile phones are much wider than those, tuning it up would be really great.

  Some suggestions would be:

  • It would be great to have a base styling with these properties

  html {
    box-sizing: border-box;
    font-size: 100%;
  }
  *,
  *::before,
  *::after {
    box-sizing: inherit;
  }
  

  This way, handling an element's size will be lot easier because of the box-sizing: border-box. You can search up some more of how this works.

  • Always have a main element to wrap the main content of your page. On this one, the section should be using the main.
  • Avoid using height: 100vh on a large container as this limits the element's height based on the remaining screen's height. Instead use min-height: 100vh, this takes full height but lets the element expand if needed.
  • Those car icons should be hidden since they are only decorative images. If an img only acts as a decoration on a site, hide them for screen-reader user using alt="" and aria-hidden="true" attributes. But if the img is meaningful, then use a meaningful alt attribute.
  • Avoid using multiple h1 on a page, use only at least 1 per page so change those into other heading tags.
  • Since there are no text-content that are visible that could be h1, you will make the h1 screen-reader only text. Meaning this will be hidden for sighted users and only be visible for screen-reader users, search about sr-only stylings and see how it is used. The h1 text should describe what is the main content is all about, this h1 would be placed as the first text-content inside the main element. Have a look at Grace's solution on this one inspect the layout and see the usage of h1 and the stylings applied to it, copy those since you will use those a lot.
  • Do not directly type the wordings as uppercase on the markup, if you do this, screen-reader will read the text letter-by-letter and not by the wordings. Use only the lowercase version to write in the markup and instead use text-transform: uppercase on it.
  • Also, to make the hover state more smoother, have a search about transition property.

  If you have any queries just let me know, aside from those, great job again on this one.

  Marked as helpful

  2