Skip to content
Submitted 5 months ago

Used flexbox.

Ghassen Ben Hamida•140
@rbhgaston
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

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

  • Alexander Sanchez G.•90
    @AlexSG29Posted 5 months ago

    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
    Ghassen Ben Hamida•140
    @rbhgastonPosted 5 months ago

    @AlexSG29 Thank you. Very insightful.

    0

Please log in to post a comment

Log in with GitHub

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