Responsive design using HTML and CSS

Community feedback

• 

  Gazdik Tamas•40

  @tamasgazdikPosted 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
• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  QR iMAGE ALT TEXT 📸:

  • Since this component involves scanning the QR code, the image is not a decoration, so it must have an alt attribute.

  ---

  • The alt attribute should explain the purpose of the image.

  ---

  • E.g. alt="QR code to frontendmentor.io"

  ---

  <img src="/images/image-qr-code.png" alt="QR code to frontendmentor.io">
  

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  Marked as helpful

  0
• 

  Kamlesh Rajesh Yadav•5,060

  @Kamlesh0007Posted over 1 year ago

  Congratulations on completing the challenge! That's a great achievement, and I'm sure you put a lot of effort into it. I really liked the way you approached the challenge and the code you wrote. You demonstrated a good understanding of the concepts and applied them effectively to solve the problem.I have a few suggestions to improve your code further. When it comes to centering a div or any element on a webpage, using margins may not always be the best approach. so use flexbox or grid layout for centering the div. make the container center properly use min-height:100vh which is used to ensure that a container or element takes up at least the full height of the viewport (the visible area of the browser window) regardless of the content inside it.

  Here's an example code snippet:

  body {
  display: flex;
  min-height:100vh; 
  align-items: center;
  justify-content: center;
  }
  
  now remove below lines of code
  .main {
  margin: 10rem auto;
  }
  

  Marked as helpful

  0