Responsive design using Flexbox and Grid

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, great work on this one. Layout in desktop looks great, it is responsive and the mobile state looks really great as well.

  Some suggestions would be:

  • Avoid using height: 100vh on a large container like the body 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.
  • A padding would be nice on the top and bottom of the body to prevent layout touching ceiling and flooring.
  • I wouldn't use h2 on the text after the h1 since it looks like a regular text to me, I would use p tag.
  • When wrapping a text-content do not just use strong or span to wrap it, use meaningful element like a p tag if it just a regular text or heading tag if it is an heading.

  Just those ones, again, great work on this one.

  0

  ---

  

  Ivana Rajic•270

  @ivanarajicPosted about 3 years ago

  @pikamart thank you for suggestions!

  1