Card with QR code using Html and Css

Community feedback

• 

  Linas•100

  @getlinasPosted over 1 year ago

  Hi. You don't have to specify exact dimensions for image. Only set size for white container, then set image to take up 100% width of the container. I added padding later to get white border around image, but despite that image takes up 100% of width

  div#qr { padding: 15px; }

  img#qr-image { width: 100%; }

  Basically just these 2 rules set image in right place, then adds padding/border around image and text elements.

  Marked as helpful

  0

  ---

  

  Salvador Guerra•10

  @SalvadorGuerra777Posted over 1 year ago

  @getlinas thanks bro for the time, You can follow me, and if You wanna help me more and win a points see a solutions to every one

  0
• 

  Harsh Kumar•1,390

  @thisisharsh7Posted over 1 year ago

  Hi Guerra, congrats on your first solution! You did a great job. Now in order to answer your query let's take one parent container with two child, first child as 'QR code image' and other child as 'text-container'. Give parent container as display: flex then give both child as flex-grow: 1 , in this way there will be no need to manually fixing of height and width and both the child will take equal spaces in the parent container. Try the code below in your solution-

  .card{ position: relative; display: flex; flex-direction: column; width: width: 360px; } 
  .qr-code{flex-grow: 1}
  img{width: 100%}
  //no need for height value it will automatically adjust itself.
  

  happy coding!!!!

  0