Submitted over 2 years ago

QR Code Card Component challenge

Jeff• 240

@njorogejeff

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

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.

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.

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

Community feedback

Ayush Nath• 360

@Beats-Ayush

Posted over 2 years ago

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%);

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

Jeff• 240

@njorogejeff

Posted 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.

Shashree Samuel• 9,260

@shashreesamuel

Posted 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

Please log in to post a comment

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