qr-code-component-main

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello Nassin, congratulations for your solution!

  Your solution code is perfect, but the component isn't fully responsive, because you've set two properties to manage the width inside the card class. Here's the code you should delete to allow the max-width works better:

  .card {
      margin: auto auto;
      /* width: 80%; */
      max-width: 18rem;}
  

  See that after deleting the widthand letting max-width you container will works perfectly.

  Hope it helps and happy coding!

  Marked as helpful

  1

  ---

  

  Nassim•200

  @Nassim555Posted over 2 years ago

  @correlucas The reason I added the rule width:80%; is to prevent the card from sticking to the side on smaller screen sizes note that I can't use margin for this same purpose since it would interfere with the margin:auto; rule so I took that approach instead in order for the card to take only 80% of the width of the body and then use max-width:18rem; so it won't exceed the 18 rem on bigger screen sizes , but I don't get what do u mean by not being fully responsive I've just tested it and it adapts the viewport just fine , anyway thanks for your feedback I appreciate it.

  0

  

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  @Nassim555 that's okay, I was just trying to help bro 😭

  1

  

  Nassim•200

  @Nassim555Posted over 2 years ago

  @correlucas I understand I didn't say anything that underappreciate your help or disrespect you I was just trying to explain why I took that approach, sorry if the language style I used looked somehow offensive, your help is appreciated and your feedbacks are more than welcomed so keep them coming bro 🙏.

  0
• 

  Dan•300

  @dtp27Posted over 2 years ago

  Hi Nassim!

  That looks really good! I haven't thought to use * to target all elements in my css, so that's definitely something I'm going to use in future projects.

  You already have the body as display: flex;, and if you add in the following properties to the body than your .card component will be centered on the page:

  justify-content: center;
  align-items: center;
  

  Happy coding!

  Dan

  Marked as helpful

  1

  ---

  

  Nassim•200

  @Nassim555Posted over 2 years ago

  @dtp27 yes I already added margin: auto which it serves the same purpose it centers the card both horizontally and vertically since the parent (body) is flex container , it looks a little bit off the center because I accidentally added margin-top : auto; to the .attribute div which I shouldn't do , nonetheless thanks for your feedback and for pointing out the mistakes I've done I'll definitely look back into them.

  1

  

  Dan•300

  @dtp27Posted over 2 years ago

  @Nassim555 Ah that makes sense. What are your thoughts on using margin: auto auto; in the component as opposed to using justify-content and align-items in the body? Any recommendations on when to use either or is it more preference? Thanks!

  Dan

  1

  

  Nassim•200

  @Nassim555Posted over 2 years ago

  @dtp27 I think it's more of a preference maybe it's just because of the fact that i'm used to use margin to center things whenever I can , you know because justify-content and align-items can be unstable and have a different behavior in older browsers like IE that's why i try to take the most simple stable approach whenever I can .

  Edit: but if u are planning to use margin with explicit values for spacing for example it's preferable to use justify-content and align-items instead.

  1

  

  Dan•300

  @dtp27Posted over 2 years ago

  @Nassim555 Got it, makes sense. Thanks!

  1