Skip to content
Submitted 7 months ago

Responsive QR code using CSS flex

Tarek Islam•220
@tarekul
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

I was challenged by using CSS Flexbox to vertically and horizontally center the card component.

Code

Please log in to post a comment

Log in

Community feedback

  • Djamel1133•910
    @Djamel1133

    Hi, great job!

    I noticed that you used an <h2> tag directly. While HTML allows you to use <h2> tags without a preceding <h1>, it is considered best practice for accessibility and SEO to have at least one <h1> tag in your document to establish a clear content hierarchy. It's best practice to start with an <h1> tag and use subsequent heading tags (<h2>, <h3>, etc.).

    Keep up the good work and happy coding!

    Marked as helpful
  • Raphael Holzer•850
    @DigitaleWeltLibrary

    Hey, good solution 😉.

    I have a little tip for you. In most cases you don't need a media query for cards, like in this case. Add these lines to the classic .card and it should have the same effect.

    margin: 1rem;
max-width: 350px;

    With these two lines you have made the card responsive for all devices. The max width means that the card cannot get larger. The margin, in contrast, is the distance to the edge of the screen when you make the browser window smaller. Now you can delete the media query.

    I hope I could help you

    Happy coding 😊

    Marked as helpful

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