Design comparison
Solution retrospective
I found it difficult to center the card on the screen
Community feedback
- @JerryDcodemasterPosted about 2 years ago
First u need to put all your HTML code in a parent container or element. Also try playing with the height to understand better. Then target your body in the CSS below👇🏻
body { display: flex; justify-content: center; align-items: center; height: 100vh; }
0 - @correlucasPosted about 2 years ago
👾Hello @Chibuikem8Kalu, congratulations on your first solution!👋 Welcome to the Frontend Mentor Coding Community!
Nice code and nice solution! You did a good job here putting everything together. I’ve some suggestions for you:
1.Add the
alt text
to improve accessibility.The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of a slow connection, an error in the src attribute, or if the user uses a screen reader). ---><img src="./images/image-qr-code.png" alt="QR Code Frontend Mentor">
2.Use relative units as
rem
orem
instead ofpx
to improve your performance by resizing fonts between different screens and devices. These units are better to make your website more accessible. REM does not just apply to font size, but to all sizes as well.3.The image is not responsive yet, a quick way to make any image responsive and respecting the container size is to add
display: block
andmax-width: 100%
to the<img>
selector. To improve the responsiveness even more adding the auto-crop property you can addobject-fit: cover
to make the image crop inside the container its inside.img { display: block; object-fit: cover; max-width: 100%; }
4.I think is a better choice you used flexbox to align it, here;s a good content explaining the alignment
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container
✌️ I hope this helps you and happy coding!
0 - @AbdellahArsPosted about 2 years ago
to center the card on the screen. you need to set the height of the container of the card like (body) to 100vh. body { hieght: 100vh; display: flex; justify-content: center; align-items: center; }
0
Please log in to post a comment
Log in with GitHubJoin 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