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

Used flexbox.

@rbhgaston

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


What specific areas of your project would you like help with?

I wanna push this "Challenge by Frontend Mentor. Coded by The beginner." to the end of the page. I tried using: justify-self: flex-end. but it does not work. I tried also: flex-grow, margin-top: auto and many other solutions but all of them keep messing with the container above ( with qrcode image and texts).

Community feedback

@AlexSG29

Posted

In answer to your question, in order to place the footer at the end of the page you could have used: footer { position: absolute; bottom: 0; text-align: center; }

  • position: absolute; bottom: 0;: These properties place the element in an absolute position with respect to the nearest container that has a position other than static (which is the default value). By using bottom: 0;, the footer is positioned at the end of this container, which in this case is the body or some other parent container.

  • justify-self: flex-end;, flex-grow: 1; o margin-top: auto;: These properties are part of Flexbox and are used to align and distribute elements within a flex container (display: flex;). However, these properties do not affect the absolute position of an element like position: absolute; bottom: 0;.

1

@rbhgaston

Posted

@AlexSG29 Thank you. Very insightful.

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