Just a QR code whit Html and Css.

Community feedback

• 

  hitmorecode•6,640

  @hitmorecodePosted over 1 year ago

  • For start it is good practice to use CSS reset. If you are not familiar with css reset, do some google research.
  • Try not to repeat yourself, meaning don't write the same thing twice. You have a class div-paragraph and paragraph they are targeting the same element. You don't need both of them.

  You can use flexbox on the body to place the card in the middle of the page. When possible avoid using margin to place the card in the middle of the page. This will make harder to create a responsive page.

  Down below I've commented out all the things you don't need. Play with it and see if you can figure out why.

  /* css reset */
  * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  }
  
  body{
  background-color: #D5E1EF;
  
  min-height: 100vh; /* add these lines*/
  display: flex;
  justify-content: center;
  align-items: center;
  }
  
  .first-card {
  background-color: white;
  width: 340px;
  height: 500px;
  /*     margin-left: 600px; */
  /*     margin-top: 100px; */
  border-radius: 20px;
  padding-top: 20px; /* add these lines */
  display: flex;
  flex-direction: column;
  align-items: center;
  }
  
  .img-qr{
  width: 300px;
  height: 320px;
  /*     margin-top: 20px; */
  margin-bottom: 20px;
  /*     margin-left: 20px; */
  /*     margin-right: 180px; */
  border-radius: 20px;
  
  
  }
  .div-paragraph{
  width: 280px;
  /*     margin-top: -30px; */
  /*     margin-left: 25px; */
  }
  .paragraph {
  /*     text-align: center; */
  font-family: 'Outfit', sans-serif;
  font-size: 20px;
  font-weight: 900;
  /*     display: block; */
  /*     margin-block-start: 1em; */
  /*     margin-block-end: 1em; */
  /*     margin-inline-start: 10px; */
  text-align: center;
  margin-bottom: 1rem;
      
       
  }
  .div-paragraph1{
  width: 280px;
  /*     margin-top: 5px; */
  /*     margin-left: 25px; */
  text-align: center;
  }
  .paragraph1 {
  font-size: 15px;
  font-weight: lighter;
  /*     text-align: center; */
  font-family: 'Outfit', sans-serif;
  color: gray;
  /*     display: block; */
  /*     margin-block-start: 1em; */
  /*     margin-block-end: 1em; */
  /*     margin-inline-start: 10px; */
      
  }
  

  Marked as helpful

  1

  ---

  

  ElisaFossemale•40

  @ElisaFossemalePosted over 1 year ago

  Hi! Thanks for checking the code, I'll try your improvements.

  @hitmorecode

  0
• 

  Refer59•190

  @Refer59Posted over 1 year ago

  As @hitmorecode said, is recommendable to do a CSS reset to your global css, after that you can try to wrap the solution inside a container which has the following css code:

  #main-container{
  display: flex;
  height: inherit;
  align-items: center;
  justify-content: center;
  }
  

  Also you must add to the global css the following code:

  html, body{
  height: 100%
  }
  

  Remove the margin-top and margin-left properties from your .first-card container, and the #main-container will center vertically and horizontally your .first-card automatically to any screen sizes.

  After that you can add a media query for mobile screens to fit the .first-card & #main-container width and height to 100%.

  Marked as helpful

  0

  ---

  

  ElisaFossemale•40

  @ElisaFossemalePosted over 1 year ago

  @Refer59

  Hi! thank you, i forgot CSS reset. thanks a lot!

  0