Design comparison
Solution retrospective
-
Did I set the widths accurately?
-
Is there something you find redundant in my code?
-
Any tips on naming classes.
Thank you
Community feedback
- @BlackpachamamePosted 10 months ago
Good job!
Here are some comments that may help you:
- Use
min-height: 100vh
instead ofheight; 100vh
(with this you are restricting a specific height, it can generate unexpected results) - Use semantic tags such as
main
,footer
,figure
, etc, this helps the accessibility and SEO of the site - The
<div class="qr-code-container">
should be<main class="qr-code-container">
- The
<div class="attribution">
should be<footer class="attribution">
- You don't need a
margin: auto 0;
in your.qr-code-container
class, to separate themain
from thefooter
, you can simply place agap: 20px
in thebody
Marked as helpful0@AlfrazgitPosted 10 months ago@Blackpachamame Thank you for your kind words and support. I will keep these things in mind. Is it always better to use min-height or min-width when trying to limit the size of things?
0 - Use
- @danielzeljkoPosted 10 months ago
I also have trouble with CSS naming and one of the methodologies I found helpful was BEM. I tried to use this in my most recent solution. I think both height and width for the image was supposed to be
288px
.Great use of root and props for resetting the browser defaults as well!
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