Responsive QR Code info HTML CSS

Community feedback

• 

  Luis Jimenez•720

  @LuisJimenez19Posted 12 months ago

  Hello! Congratulations on completing the challenge.

  One recommendation is that you remove the styles that the browser brings by default, you can do something like this:

  .*,
  *::before,
  *::despues de{
       margin:0;
       padding:0;
       box-sizing:border-box;
  }
  

  Very well centering the card. In this case, when it is a single card, I don't think it is necessary to use a media query to reach the objective (I think you are using the media query wrong, I don't know if there are phones with 1440px screens) what you can do is give it a width:90% to the card and give it a maximum width that they ask for, for example max-width:375px

  This is how the container would look:

  .container {
       display: flex;
       align-items: center;
       justify-content: center;
       height: 100vh;
       width: 100%;
       overflow: hidden;
  }
  
  

  And this is how the card would look:

  .card {
       background-color: var(--white);
       box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
       padding: 1.2rem;
       border-radius: 1.5rem;
       /* width: 50%; */
       /* max-width: 20%; */
       width: 90%;
       max-width: 375px;
  }
  

  I hope I have helped you, greetings.

  0
• 

  Melvin Aguilar 🧑🏻‍💻•61,120

  @MelvinAguilarPosted 12 months ago

  Hello there 👋. Good job on completing the challenge !

  I have some suggestions about your code that might interest you.

  • Setting the width of the component with a percentage or a viewport unit will behave strangely on mobile devices or large screens. For a responsive and resizable component, consider using max-width of 320px or 20rem to make sure that the component will have a maximum width of 320px on any device and adding some external margin to avoid border touching the screen on mobile devices

  You can simply use this:

  .card {
       /* ... other styles */
       /* width: 100%; */
       /* max-width: none; */
      max-width: 320px;
  }
  

  • You should use the box-sizing: border-box property to make the width and height properties include the padding and border of the element. This will make it easier to calculate the size of an element. You can read more about this here 📘.

  • Use min-height: 100vh instead of height. Setting the height to 100vh may result in the component being cut off on smaller screens, such as a mobile phone in landscape orientation.

  I hope you find it useful! 😄 Above all, the solution you submitted is great!

  Happy coding!

  0