@helenhapp
Posted
Hey there! 🙋🏽♂️
Congrats on completing the challenge! ✅
Your project looks fantastic!
The screenshot looks very close to the original design. But I see that you changed the code since then and added the h1 element before the main, and it messed up the layout. If you want to have the h1 element on your page for accessibility purposes but do not need it for the part of the website you are developing (like the QR code component), you can hide it from visual display using CSS like this:
.sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
Hope this helps!
Keep up the great work!
Marked as helpful
@defenstration
Posted
@helenhapp
Thank you! I'm still playing with it actually. I ended up changing some positions to get things to line up again.
My changes were almost all done for accessibility warnings on the report. I am still learning about all of the different things involved. The .sr-only that you shared is something I have seen on some vids, but have never used. I think it's a good thing to add to my default css.
Thank you again, I really appreciate the help!
