Skip to content
Submitted 6 months ago

Building a card layout using just HTML & CSS

rnehacodes•10
@rnehacodes
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

This helped me learn how to make simple layout with just basic style attributes. Next time, I might explore other layout techniques like flexbox & grid.

What challenges did you encounter, and how did you overcome them?

Deciding on the layout technique to use.

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

Any feedback on the CSS I wrote.

Code

Please log in to post a comment

Log in

Community feedback

  • Keith•190
    @KeithEsc

    Your solution looks good. On smaller viewports like 375px width it starts to get a little messed up.

    I wanted to learn more about why myself so I looked at your code.

    • I removed margins from .card - I think you were using these to position the card?

    • Changed the width of .card to 100%. Realized this works in mobile view, but in desktop is now stretches the entire screen. So I changed it to max-width: 400px; which allows it to take up the entire screen on smaller screens but not grow larger the 400px on larger screens.

    • Added margin: 0 auto; to .card which centers your .card element on the screen at all sizes.

    So three quick changes and I think you got a great result.

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