Making QR Code using HTML and CSS

Questions

1.) What did you find difficult while building the project?

• Answer: Well, finding the right size for the margin and font-style. I'm not worried about the padding and border, only those two that give me some trouble.

2.) Which areas of your code are you unsure of?

• Answer:

@media only screen and (min-width: 275px) {
  .app {
    margin: 1em;
  }
}

@media only screen and (min-width: 465px) {
  .app {
    margin: 2em;
  }
}

@media only screen and (min-width: 545px) {
  .app {
    margin: 2.5em;
  }
}

@media only screen and (min-width: 625px) {
  .app {
    margin: 20%;
  }

  .app-title {
    font-size: 4vw;
  }

  .app-paragraph {
    font-size: 3vw;
  }
}

@media only screen and (min-width: 1100px) {
  .app {
    margin: 37%;
  }

  .app-title {
    font-size: 1.8vw;
  }

  .app-paragraph {
    font-size: 1.3vw;
  }
}

@media only screen and (min-width: 1440px) {
  .app {
    margin: 37%;
  }

  .app-title {
    font-size: 1.8vw;
  }

  .app-paragraph {
    font-size: 1.3vw;
  }
}

I find this code of mine redundant but I'm not quite sure if there is another way of doing this kind of stuff. This just came out of mind and wing it. It works! but I had a feeling that there is another way of doing this.

3.) Do you have any questions about best practices?

• Answer: Is there a better way to resize margins, font-size, and using media queries? I get its purpose but is there a better way to do those? Any answer or guidance/criticize, I will gladly accept.