
Solution retrospective
I would like to get a feedback over all my project
Please log in to post a comment
Log in with GitHubCommunity feedback
- P@nursh
HTML
- Change your
<h4>
tag to a<p>
tag. The second text is a paragraph not a heading. - add some descriptive text to your image
alt
attribute. This is for accessibility. Something like Product QR code. - Use only one container for your content. Remove the second div with the .contain class. You want to avoid unnecessary nesting in your code. It will be difficult to read and debug
CSS
- To center the .container container, Set the body to take up the width of the window, and set it's display to grid and place-items to center. Using the following code
body { /** your other declarations here **/ min-height: 100vh; display: grid; place-items: center; }
- Remove the margin-top from the .container class. It should be centered. Also avoid using magic numbers in your code.
- Move the code in the .contain class into the .container class and delete the .contain as it is no longer needed.
- Avoid setting font-size in
px
units. Use responsive units like rem. - Avoid setting explicit width and height using px units on a container. Let the content determine the size of the container. If you want to set dimensions, use units like rem and em so that it is responsive. Set the max-width of the container to be
max-width: 20rem
for example, then let the browser adjust the size - For the image, also remove the width and height. Give it a
max-width: 100%
and set theheight: auto
. This makes sure the image is within its parent container and then the height is self-determined
- Change your
- @AdelineSey
Overall, it looks great! The colors and alignment of your live site match the reference photo well.
Few things I'd adjust in your code:
- Line 12: Your <div> opening tag is missing the </div> closing tag.
- Line 14: Your image alt is empty and should have a brief description of the image.
- Line 16: Your opening tag is <h4> but your closing tag is </h2>. They should both be the same h-number.
Hope this helps 🙂
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord