QR code component using HTML & CSS

Community feedback

• 

  IRVINE MESA•1,855

  @DrMESAZIMPosted over 2 years ago

  hi Andrew ..

  To center the component better . Here are some to changes I did after I downloaded your code .All my work was focused on the CSS code

  1.Index.html file remove line 33

  2.Index.html file line 48 > width:40% ;

  3 index.html add .container { height:50%}

  4.index.html set img{ width:70%; border-radius: 10px;height: 80%; }

  5. index.html line 65 add div > p { font-size: 0.8rem; line-height: 1.5; }

  6 .index.html line 93 replace the media query with this new media query

    @media screen and (min-width: 550px) {
  
  .container {height: max-content; width: 25%; }
  
   img {width:90%; border-radius: 10px; height: 30vh; }
  
    }
  

  Marked as helpful

  0
• 

  Bradley Smith•230

  @bradleyhopPosted over 2 years ago

  I found this article to be very helpful on centering: https://css-tricks.com/centering-css-complete-guide/ For my solution, I followed the guideline under centering vertically & horizontally, with the element of being a fixed width and height.

  I'd extend the width of your qr component card so that the text flows better. I do like how the color of the footer complements the color scheme. Great job overall!

  Marked as helpful

  0