Skip to content
Submitted almost 3 years ago

Responsive QR code component using CSS Flexbox

Jaheem Prevost•80
@jaheemprevost
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I just couldn't manage to get the next exactly like how it was shown in the design images. I wonder if this is good enough...

Code
Loading...

Please log in to post a comment

Log in

Community feedback

  • Pradeep Saini•990
    @pradeeps4ini

    Hi, jaheem.

    You implemented the design pretty well.

    I would like to suggest some changes, that will make the code better.

    • Use semantic markup. For the card component you can use <main>, tag since card is the only main content on the page.

    • In your CSS, you're repeating the styling for .card-component in both the desktop and mobile mode. When you wrote the style outside media query, it will cascade and will be applied in the media query as well. You should only write the properties you want to change. Don't rewrite the properties, you're not changing.

    Marked as helpful
  • Remtaine•360
    @remtaine

    It looks really good! It's pretty similar to the desktop and mobile design images so I don't think there's a problem. I suggest you add a shadow next time so it looks more like the design

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