HTML 5 SCSS Flexbox

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hello there 👋. Good job on completing the challenge !

  I have some suggestions about your code that might interest you.

  Regarding your question:

  • You are using * { margin: 15px; }. The * selector is a universal selector in CSS that selects all elements on a page, and the <br> tag is one of those elements, so in other browsers like Firefox, your <br> element has 15px of margin, which causes that large space between lines, and the text overflows the card because you set a defined height (height: 500px;) to the card, which makes it unable to grow bigger and its text overflows.

  • The <br> tag is not a semantic element. If a screen reader user is reading the page, they will hear "line break", which breaks the flow of the content. Instead, use CSS properties like margin and padding to add vertical space between elements.

  HTML 📄:

  • Use the <main> tag to wrap all the main content of the page instead of the <div> tag. With this semantic element you can improve the accessibility of your page.

  CSS 🎨:

  • Instead of using pixels in font-size, use relative units like em or rem. The font-size in absolute units like pixels does not scale with the user's browser settings.

  • The width: 100vw property in the body tag is not necessary. The body tag is a block element and it will take the full width of the page by default.

  • Use min-height: 100vh instead of height: 100vh. The height property will not work if the content of the page grows beyond the height of the viewport.

  I hope you find it useful! 😄 Above all, the solution you submitted is great!

  Happy coding!

  Marked as helpful

  0

  ---

  

  Horshaw•85

  @HorshawPosted almost 2 years ago

  @MelvinAguilar Indeed, I had only tested on Chromium-based browsers. Thank you for this detailed feedback, I have made the recommended changes.

  0
• 

  Emmanuel Gyang•10

  @RipeplantainPosted almost 2 years ago

  its better you put the text in a div then set the width for that div. It will push the rest of the text to the bottom then use text-align:center;

  		<div class="qr-text">
  			<p class="head-text">Improve your front-end skills by building projects</p>
  			<p class="desc-text">Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
  		</div>
  
  	.qr-text {
  		width: 300px;
  		text-align: center;
  	}
  

  0
• 

  Horshaw•85

  @HorshawPosted almost 2 years ago

  Does anyone know why the text overflows the card in the screenshot of my solution? I can change the window size in any direction, but I never get this error on my Vercel hosted version.

  0