Looking to hire developers?
What I found difficult: Figuring out how to fit the QR code into the container .div effectively. Turned out to be as simple as setting the width to 100%.
What I'm unsure of: That this approach was the most efficient way of achieving this. When to use px or when the rem.
I edited the footer links to have a hover state of white, but wanted to change the visited color from purple to blue, however when I changed the visited state it removed the hover state. I'm unsure of how to make this happen.
@dalnoki
Posted
Hey @inkfromblood,
Congrats on your first solution!
About the px/rem debate: this article sums it up in great detail, and it helped me understand the best practices: https://engageinteractive.co.uk/blog/em-vs-rem-vs-px
I usually convert all of my px values to rems, except for the 1px values :)
I hope it helps!
Marked as helpful
@inkfromblood
Posted
@dalnoki Thank you so much! That is very helpful.
@MohamedAridah
Posted
Hello @inkfromblood, congratulation on submitting your first solution🎉👏.
Yes giving the QR code image max-width: 100% is totally right since this will make the image to take the full width and never overflow it.
I have also some notes for you:
font-family: 'Outfit', sans-serif globally instead of redeclare every time:body {
font-family: 'Outfit', sans-serif;
}
instead of using <h2> heading level for the text you can just use <p> element since this text is not a heading. This will fix your Accessibility Issues
use <footer> instead of .attribution div it's more HTML Semantic. Also This will fix your Accessibility Issues
This challenge Doesn't has nay links so you can Remove styles of the <a> tag since it's useless.
you can see My solution for this challenge it may be helpful for you..!
I hope this wasn't too long for you, hoping also it was useful😍.
Goodbye and have a nice day.
Keep coding🚀
Marked as helpful
@inkfromblood
Posted
@MohamedAridah Thank you so much! That was incredibly helpful and makes a ton of sense. I'll update the code with your suggestions! I really appreciate it!
The .attribution div was provided by the project, and the anchor tags were referring to the links in the footer (not really part of the project, just me trying to make it all look nicer).
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
