Responsible QR Code with Media queries

Community feedback

• 

  Fluffy Kas•7,655

  @FluffyKas

  Posted about 3 years ago

  Hello,

  There's a few reasons for this:

  1. The body has a width of 100% by default, there's no reason to overwrite this to 1440px. The height should be swapped for min-height: 100vh.

  2. To center a component you can use flexbox or grid. You could add this to the body:

  display: grid;
  place-items: center;
  

  3. Instead of giving your component a width, try max-width. % isn't great to use here (as that will just keep stretching with the screen size, which isn't what you want), try going with a rem value.

  4. You need to make your image responsive by using this snippet:

  max-width: 100%;
  height: auto;
  display: block;
  

  These things will probably help making your solution more responsive.

  10

  Marked as helpful