Skip to content
Submitted over 2 years ago

QR Code Card Component challenge

Jeff•240
@njorogejeff
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

The challenge was exciting as it was a great example of creating card components with CSS. Also, concepts like box shadows, CSS backgrounds, and positioning are learned while designing/building this challenge. Although it was a simple task, it had its fair share of challenges that I would love for you to help me solve.

The main challenge I encountered was, "How do I center the card in the middle of the page without using CSS Flexbox?" Although I added margin-top to the card to push it down, this method may not be effective in achieving the desired result. As a result, I pose this question.

  1. How do I center the card in the middle of the page?

The second issue I encountered was, "How do I position the footnote perfectly at the bottom of the page?" Centering the footnote proved challenging as I tried playing with the 'position' property, but I could not center the footnote. In the mobile screen layout, it even overflows below the screen. Therefore my second question is.

  1. How do I position the footnote perfectly at the bottom of the page and in the center?

Community feedback

  • Ayush Nath•360
    @Beats-AyushPosted over 2 years ago
    1. You can center the card by
    • Using margin: 2.5rem auto;. This is shorthand. 2.5rem is the margin-top and margin-bottom.
    • Using absolute positioning.
    position: absolute;
left:50%;
transform: translateX(-50%);
    1. I think the footnote is fine its place. No such biggie. If you don't want it wrapping, give it a min-width.

    Search on stackOverflow and MDN for these queries. They have explanations in great detail.

    Marked as helpful
    1
    Jeff•240
    @njorogejeffPosted over 2 years ago

    Thank you @Beats-Ayush. I used absolute positioning to center the footer and it worked! For the card component, I used CSS Flexbox to center it within the page. Though I don't understand much on the 'transform' property, I will research and learn more about it.

    0
  • Shashree Samuel•9,260
    @shashreesamuelPosted over 2 years ago

    Hey good job completing this challenge

    Keep up the good work

    Your solution looks great however I think your card needs some margin from the top using margin-top.

    In terms of accessibility issues simply wrap all your content between main tags

    I hope this helps

    Cheers Happy coding

    Marked as helpful
    1

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