Design comparison
Solution retrospective
-
I am always a little unsure how/when exactly to use a div to contain a certain section of html. I initially started off by enclosing each section of html in a div (so I initially had I believe 5 divs). That felt like a lot and styling became a little more difficult. So I reduced the amount of div to what is currently on there (3 total divs) and found that much easier. Is there any guidelines or best practices when using divs?
-
Im unsure how exactly to get the QR Code image to be closer in line to the edges of the .card than it currently is. I was playing around a little bit with width percentage and padding but wasn't getting what I wanted.
Community feedback
- @danielmrz-devPosted 10 months ago
Hello @theunicornsteak!
Your solution looks great!
I have a suggestion for improvement:
- For semantic reasons, use
<main>to wrap the main content instead of a<div>.
š This tag change does not impact your project visually and makes your HTML code more semantic, improving SEO optimization as well as the accessibility of your project.
I hope it helps!
Other than that, great job!
0 - For semantic reasons, use
- @hashiharisPosted 10 months ago
Hi Nick, Great Job!
- Your solution looks great. I also liked your approach of using flexbox to solve it.
- I hope using the width of the card component as a percentage would be good, instead of using pixels.
- Also may be you can try adjusting the padding-inline of the card component using 'em' units so that it would ensure you equal spacing, without compromising the responsiveness.
- Your approach to set the qr-code image width in percentage in my opinion is not a problem.
- Hope this helps you
0
Please log in to post a comment
Log in with GitHub
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