QR component design solution

Community feedback

• 

  Krushna Sinnarkar•1,100

  @krushnasinnarkarPosted 4 months ago

  Hi @priya209,

  Congratulations on successfully completing the challenge!

  Your solution looks nice, though I have a suggestion that I hope will be helpful!

  Suggestion: Using max-width Instead of Media Queries for Width

  Instead of using media queries to set the width like this:

  @media (min-width: 500px) {
      .container {
          width: 400px;
      }
  }
  

  You can directly use the max-width property on the .container. This will ensure that the component's maximum width is 400px on any screen size and reduce the width for screens smaller than 400px.

  Here's how you can do it:

  .container {
      max-width: 400px;
      width: 100%; /* Ensures it takes full width of the parent for smaller screens */
  }
  

  By using max-width, the container will adapt more gracefully to different screen sizes, eliminating the need for multiple media queries for width adjustments.

  I hope you find this helpful, and I would greatly appreciate it if you could mark my comment as helpful if it was.

  Feel free to reach out if you have more questions or need further assistance.

  Happy coding!

  Marked as helpful

  0

  ---

  

  Priya Pathak•10

  @priya209Posted 4 months ago

  Hi @krushnasinnarkar,

  Thank you so much for taking the time to review my code and provide feedback on my first task on FrontendMentor.io. Your suggestions are valuable in helping me address the issues. I implemented your advice, and it significantly improved the overall look and functionality of the site.

  I really appreciate your insights and guidance.

  0

  

  Krushna Sinnarkar•1,100

  @krushnasinnarkarPosted 4 months ago

  @priya209

  I would greatly appreciate it if you could mark my comment as helpful if it was.

  Feel free to reach out if you have more questions or need further assistance.

  Happy coding!

  0