QR code component

Community feedback

• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  CSS 🎨:

  • Let me explain, How you can easily center the component for better layout without usage of absolute positioning.

  ---

  • We don't need to use absolute to center the component both horizontally & vertically. Because using `absolute' will not dynamical centers our component at all states

  ---

  • To properly center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here 📚.

  ---

  • For this demonstration we use css Grid to center the component

  body {
      min-height: 100vh;
      display: grid;
      place-items: center;
  }
  

  • Now remove these styles, after removing you can able to see the changes

  .card {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%,-50%);
  }
  

  ---

  • Now your component has been properly centered

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  Marked as helpful

  1
• 

  Milan•90

  @dambusPosted over 1 year ago

  Hi Felipe!

  First of all, you've done a great job so far, don't let yourself get frustrated when doing something first time, it'll get better.

  I see you're using display: flex; for your card element. Benefit of flex is that it makes content (qr code image, heading, text) responsive and force it to fit the surrounding element (card in this case). This means you don't have to specify your width and height of that card exclusively. Just set the max-width of the card and let flex do it's job.

  In order to help flex do it's job for you, set elements inside your flexed card to be 100% of width (e.g. qr code image: width:100%) and set padding of the card to some value let's say 16px so you can get that fine white border line of 16px around all elements inside card.

  Then, finally if needed add media queries and change max-width of card and font-size, font-weight of text accordingly.

  You don't need to make containers for every single element, flex is doing that for you too, so you can get rid of image container and text containers (these are all block level elements, so they tend to take up 100% of parent (surrounding element's) width.

  Also as @BernardusPH said, practice to use landmarks / semantic html and include css reset in your style.css file (you can read more of css reset HERE

  Hope this helps, have fun coding

  Marked as helpful

  1
• 

  Bernardus•1,095

  @BernardusPHPosted over 1 year ago

  Hello FELIPE ALVES LEÃO DE ARAÚJO

  For this problem:

  I see that you are setting a max-width:300px on the the card and then when the screen gets smaller you try to make it bigger which it cant, well usually it cant but with css I am suprised this didnt work. Anyway you cant go over 300px and you are trying to set it to 400px. I suggest using clamp here as you can set it in the card in the normal view and once your screen geta smaller you can add another clamp. Please look it up futher as it is a great tool.

  This should help with your media problem, if not then just ask.

  I have a few suggestions for you that might help other than the media.

  First please dont use divs as landmarks if you are not using a framework/library like react. What I mean is the direct children of the body.

  Landmarks include:

  • nav
  • main
  • footer
  • etc

  Lanmarks are used by screenreaders and landmarks make it easy for us to read the code so change the card div to a main.

  Add this to your code and it would make life easier:

  *{
  ////makes it so padding and margin wont increase the container's size////
  
  box-sizing:border-box; 
  
  }
  
  body{
  ///adds a perfect height to body(the height starts at the height of the screensize.////
  min-height:100vh;
  
  ////puts the card in the middle////
  display:flex;
  justify-content:center;
  align-items:center:center;
  
  
  }
  

  Hope this helps.

  Marked as helpful

  1