responsive design using flexbox

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. I had to zoom out though to see the desktop layout, seeing you css, you are using 1400px as the breakpoint for desktop but it is too large, lots of users including me uses a 1366x768 and all of use needs to zoom out as well, toning it down would be really great. Mobile layout however looks great.

  Some other suggestions would be:

  • Avoid using height: 100vh on a large container like the main tag 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.
  • Also don't add width: 100vw as this adds an extra horizontal scroll since this doesn't account the scrollbar's size and it just create a horizontal scrollbar.
  • Those images that are just decorative, add an additional aria-hidden="true" so that they will be totally hidden for all screen-reader users.
  • Using div for the accordion is not really great. Remember, interactive components uses interactive elements. By using div you are making it not-accessible. Instead, to avoid extra javascript, use details element as it is easy to use and it is accessible because it is intended to be used for accordions.
  • The dropdown img could use aria-hidden="true" as well.

  Aside from those, great job again on this one.

  Marked as helpful

  0