Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

QR Code challenge using internal CSS

Hanana 170

@meantoes

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi! I want to ask how to put the credit to the bottom of the page efficiently.. and I'd appreciate any feedback to improve my code⭐ Thanks in advance⭐⭐

Community feedback

Muhammadh 1,140

@Mr-jaw

Posted

Hello there 👋

congratulation on completing the challenge

HTML 📄

  • replace <div class="attribution"> with the <footer> tag of the credit to fix accessibility issues.

CSS 🎨

  • Use relative units like em or rem for margin, padding, width, and height. most preferably rem for font sizing to make it more responsive. avoid using px which is an absolute unit.

We can do the following to bring the credit to the bottom of the page

  • In the body element add position: relative

  • add the following lines of codes somewhere in the CSS file

.attribution {
  position: absolute;
  bottom: 0;
}

This will position the credit at the bottom of the page

change the value of the bottom property to adjust how far from the bottom of the page it should be located

I hope this was useful 😊

HAPPY CODING

Marked as helpful

0

Hanana 170

@meantoes

Posted

@Mr-jaw Hi! thank you so much for the tips and the feedback🙂 I'll try to use relative units from now on👩🏻‍💻 and thank you so much for the answer of my question!⭐⭐

0

Please log in to post a comment

Log in with GitHub
Discord logo

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