@MelvinAguilar
Posted
Hi @Msindy, good job for completing this challenge! 👋
Here are some more suggestions to improve your code:
- Try to use semantic tags in your code More information here:
Instead of:
<body>
<div class="contain">
</div>
<body>
Try using:
<body>
<main class="contain">
</main>
<body>
-
Instead of using
pxinfont-sizeuse relative units of measurement likeremorem, the font size not bepxbecause in some browsers the user with limited vision cannot change the font size, usingpxin fonts does not provide web accessibility, try usingfont-size: 0.938rem -
Don't use <br>, these are read by screen readers and mess up the reading flow of the content, you can use padding or some other property
-
The container is not center. If you want to center an element, you can use flexbox to center things:
body {
width: 100%;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
width: 100%take the full width of the element(screen)min-height: 100vhmeans the height of the body element is equal to 100% of the viewport height.display: flexis used to set the layout of the element to flex.flex-direction: column;this defines the direction the flex items are placed in the flex containerjustify-content: centeralign the flex item at the center of the container horizontally.align-items: centeralign the items vertically.
And remove margin: 40px; from the body selector
More info here: https://www.w3schools.com/howto/howto_css_center-vertical.asp
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
And update this:
.image-qr-code {
background-color: hsl(0, 0%, 100%);
padding: 10px;
border-radius: 20px;
max-width: 350px;
text-align: center;
/* margin: auto; */
/* display: block; */
/* justify-content: center; */
/* align-items: center; */
}
- The
<p id="footer">needs to be wrapped in a Footer Element, for example
<footer class="attribution">
<p>Challenge by ... </p>
</footer>
I hope those tips will help you.
Good Job !
Marked as helpful
@Msindy
Posted
@MelvinAguilar Thank you so much, Melvin. Your input is very insightful and helpful. I have made the corrections per your advice and it works perfectly. Thank you for taking out the time to help review and point out my mistakes .
