Submitted over 2 years ago

QR code with Flexbox challenge

stv10•40

@stv10

Preview site View code

This is a solution for...QR code component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

Hello community! Blessings for you all, i got a question

How can I code this better? I know there have to be a way

 @media (max-width: 1200px) {
    #card {
        width: 23%;
    }
  }

  @media (max-width: 1100px) {
    #card {
        width: 25%;
    }
  }

  @media (max-width: 1000px) {
    #card {
        width: 27%;
    }
  }

I made a lot of these querys, please if you know how can i replace them tell me And of course any other thing that colud be done better!

!UPDATE I use the max-width property, delete the querys and it worked perfect for me, also change the height property to max width, it really improved the card responsive behavior. Thx to the community for the feedback

#card {
max-width: 300px;
}

Community feedback

Lucas 👾•104,400
@correlucasPosted over 2 years ago
👾Hello STV10, congratulations for your solution!

I saw your code and its too much complex, you need to code more simple as you can ever, in this case to solve the problem with media queries, was easy.

In this challenge, you don't need media query, all you need is your component responsive.

To do that I've deleted all media queries and wrote max-width: 350px; to the container. Note that width is a fixed value but max-width means that the card has a maximum width but can gets smaller.

#card { max-width: 350px; }

Try this instead after delete the media queries and you'll see how changes your component!

Hope it helps and happy coding!
Marked as helpful
1
stv10•40
@stv10Posted over 2 years ago
@correlucas Thanks man, i did what you said and the container behaves a lot better. I appreciate it!
1
David•8,000
@DavidMorgadePosted over 2 years ago
Hi man and congrats on finishing the challenge!

You can give your div a width with a relative unit like rem, for example you can give your #card a width: 25rem and to adjust it a bit for mobile you can use the max-width property.

When you are using % they are based on the width of the container, in this case the container is the full screen that's why changing the width for smaller devices makes your component small.

Hope my feedback helps you!
1
stv10•40
@stv10Posted over 2 years ago
@DavidMorgade Hello David! thank you very much for your feedback

I change the code and use the max width property instead, it really helps.
0

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