QR code card with flexbox

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello Mohieb, congratulations for your new solution!

  Your component is perfect, but is not responsive yet, this is due the fixed width you've applied to the container.

  The main difference between width and max-width is that the first property is fixed and the second is flexible, for example, a component with width: 320px will not grow or contract because the size will be ever the same, but a container with max-width: 320px or min-width: 320px can grow or contrat depending of the property you've set for the container. So if you want a responsive block element, never use width choose or min-width or max-width.

  Note that there's no need to use height here, because since you set a height for an element, this means that this element will grow until a certain point and after that the inner content (as texts or images) will start to pop out the element due its fixed height, so isn't necessary to set the height the container height comes from the elements, its paddings and height.

  .card {
     /* height: 450px;*/
      max-width: 320px;
      }
  

  Hope it helps and happy coding!

  Marked as helpful

  0
• 

  Mohieb•90

  @dev-mohiebPosted over 2 years ago

  Thank you so much. I will definitely keep an eye out for those things in my next project!

  0