Creating QR Code using flex box

Community feedback

• 

  Nayan Bhatt•980

  @freaky4wrldPosted about 1 year ago

  Hey there, here's some suggestions that might do the stuff for you....

  • first of all to center your container class you don't have to make the body element a flex, you can achieve it by giving container class(preferred in % not in hard-coded px units) and use the margin property to center it.........

  .container{
      width: [some-value]%;
      margin: [some-value]rem/em/% auto
  

  • well in the above code we are giving the container class the same top&bottom margin and for the left&right we are letting the browser set some margin.... and that's making our container class to be centered.....

  • in the container class you can add some padding.... to make the container look good

  • for the rest of the elements in the container like h1, p, img elements, try to wrap them in two different divs, divs are used for grouping and there's no harm in using them...

  <div class="container">
     <div class="qr-image">
         <img/>
     </div>
     <div class="card-text">
          <h1></h1>
          <p></p>
     </div>
  

  • apply the desired flex property on the two divs you just made..........

  • here's some references flex-cheat-sheet, flexbox-traversy-media

  Hope this helps in making the required modification..... glad I can help you!!

  1

  ---

  

  Elvy A Decoo•90

  @Elvy1999Posted about 1 year ago

  @freaky4wrld I appreciate the feedback!

  0