Skip to content
Submitted over 1 year ago

CSS Flexbox

Ernie Hernandez•10
@detanaded
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

Hello! While I wasn't sure about adding in the original copy that was included in the files, I ended up moving them into a footer. My issue I came across with the footer was how to position it on the page. In this case I used position: absolute and bottom: 1px. When viewing this in dev tools mobile it looks great, however viewing the live site on my iPhone 13 the footer overlapped the container. What would be the best way to go about position a footer and ensuring its responsive? I'd like to not rely on Chrome dev tools

Community feedback

  • IRVINE MESA•1,855
    @DrMESAZIMPosted over 1 year ago

    hi Ernie Hernande. well done that was good work for your first submission project I do want you to consider removing duplicate text found on your footer.

    0
    Ernie Hernandez•10
    @detanadedPosted over 1 year ago

    @DrMESAZIM Hello Irvine, Thank you for mentioning that. I commented out the footer that had the duplicate text for now and regenerated the screenshot.

    1
  • Lucas Carlesso•140
    @lucarlePosted over 1 year ago

    Hey, I just submit a solution dealing specifically with this problem: Centering the component to perfect match the design, without excluding the attribution and without using any "hacks". I hope you find it helpful, feel free to ask any subsequent questions.

    *I'm assuming you used position absolute so that the footer didn't interfere with the centering of the card, correct me if I wrong. If instead you wanted a sticky footer effect, I recommend you give a look in Kevin Powell Easy Sticky footer, MDN Layout cookbook Sticky footers and/or Every Layout The Cover.

    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