All comments

• 

  Mina nady Narouz• 20

  @MinaNarouz

  Submitted over 1 year ago

  

  Responsive design using HTML and CSS

  3

  60

  

  Gazdik Tamas• 40

  @tamasgazdik

  Posted over 1 year ago

  Good job on completing the challenge! A couple of tips that could be beneficial in the long run:

  index.html

  • use main element instead of <div class="main">. main has actual semantic meaning and therefore better in terms of accessibility. div doesn't have any semantic meaning whatsoever
  • since the content within the <h3> is the only title, you can instead include it in <h1> and then style it as you'd like it to appear

  style.css

  • at body selector adding min-height: 100dvh; is generally a good idea, since for mobile devices it takes into account different controls, that might pop in during scrolling (you know, that button triplet - background apps, exit to start screen of mobile, go back, or the address bar at the top)
  • middle part can be positioned centrally by setting display: flex; and justify-content: center; on the body, then margin: auto; on the .main
  • position: relative; is unnecessary for the img, as you don't specify either top, bottom, left, or right
  • padding: 1px 20px; - 1px is basically invisible, that can be removed. If you want to do padding only on left and right side, you can instead do: padding-inline: 20px; (for setting top and bottom padding you can do padding-block: 20px;)
  • also the style-guide.md specified the paragraph font-size to be 15px. Since by default most browsers use 16px, setting font-size: 0.9375rem; on p should do the trick.

  Once again, great work, good luck going forward! :)

  Marked as helpful

  0