Frontend Mentor QR Code design with CSS

Community feedback

• 

  Ecem Gokdogan•9,380

  @ecemgoPosted over 1 year ago

  Some recommendations regarding your code that could be of interest to you.

  In order to make the card responsive and avoid repetition in your code, you can follow the steps below:

  • If you want to make the card centered both horizontally and vertically, you'd better add flexbox and min-height: 100vh to the body

  body {
    /* margin-top: 10em; */
    /* margin-bottom: 10em; */
    /* margin-left: 12.5%; */
    /* margin-right:12.5% ; */
    /* padding-left: 20px; */
    /* background-color: #FDF4F5; */
    background-color: hsl(212, 45%, 89%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
  }
  

  • When you use flexbox in the body, you don't need to use margin in the table to center the card
  • If you use max-width, the card will be responsive
  • You'd better update padding to give a gap between the content and the border of the card

  table {
    /* margin: 0 auto 0 auto; */
    /* height: 3281.25%; */
    /* width: 40%; */
    /* padding-top: 25px; */
    /* padding-bottom: 25px; */
    /* background-color: azure; */
    background-color: white;
    max-width: 300px;
    padding: 15px;
  }
  

  • In addition to that above, in order to make the card responsive and the image positioned completely on the card, you'd better add width: 100% to the img

  .QR-img {
    /* height: 70%; */
    /* width: 90%; */
    /* margin: auto; */
    width: 100%;
    border-radius: 20px;
  }
  

  • You can update texts in this way:

  h2 {
    /* margin: 0 auto 0 auto; */
    /* width: 80%; */
    /* margin-top: 40px; */
    /* margin-bottom: 20px; */
   font-family: "Mulish", sans-serif;
    margin: 10px 0;
    font-size: 20px;
    color: #0b2447;
  }
  

  p {
    /* margin: 0 auto 0 auto; */
    /* width: 70%; */
    font-family: "Maven Pro", sans-serif;
    color: grey;
    font-size: 16px;
  }
  

  Hope I am helpful. :)

  0

  ---

  

  socketgut•20

  @varadpalPosted over 1 year ago

  @ecemgo Thank you... it helped me improve :)

  1