Skip to content
Submitted 4 months ago

Responsive QR content using flex css

Fernando Rodriguez Ruiz•10
@Fher03
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

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

Im proud of how did i used semantic to create the html to design the page by watching the example image

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

I had a rare issue trying to place the container in the page but yhe solution was a bad use of css box-content

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

I would like to performance how i use css properties and which are the best practices to code web pages with responsive web design

Community feedback

  • Alex•3,130
    @Alex-Archer-IPosted 4 months ago

    Hi!

    Congrats with your first challenge =)

    You really use semantic tags right. As for responsiveness it's good that you are use max-width property, but there is not much sense in the min-width. I mean in the screens smaller than 250px (if they exist) the content still will overflow. It's be a bit neater to use width: 95% (or vh as you doing now) to keep a little place between card and screen borders.

    Also I suggest you to add min-height: 100vh to body tag. Cos for now body could not take all the screen and this lead to white stripe at the bottom (you can see it on the screen of your project). The min part is for the case if content became larger than the screen.

    And a couple tiny additional suggestions =)

    I see that you are already familiar with the rem units. Use them for fonts as well - it's their first purpose.

    And you can style image directly no need for div wrapper.

    So, congrats again, it's a good start, keep doing =)

    0

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