Margin of auto for the wrapper to center it

Community feedback

• 

  P

  Jake Godsall•1,390

  @jakegodsallPosted 8 months ago

  Hi 👋

  Great work with this component.

  I can make a few comments regarding responsivity. I'd recommend changing the way you're thinking about defining the width in the desktop view. From what I understand you're deciding on how you want the component to look at full width, which is approximately 15vw.

  The problem with this is that at smaller viewports (approx width: 450px) the component ends up with a width of around 100px which really is too small.

  You'd be better to use a much wider width for the component, let's say 90% and then add a max-width with a fixed-value for the larger screen size. That way you'll have a more appropriate width across a range of viewport widths.

  .qrwrapper {
      width: 90%;
      max-width: 300px;
  }
  

  Thanks

  Marked as helpful

  0

  ---

  

  Musie Misgun•40

  @Natty-techPosted 8 months ago

  Hello @jakegodsall! Thanks for the advice on how to make the the qr more responsive. I have been meaning to contact u so that we could work together on different projects so that i could learn from u, that's if you are willing to though.

  Thanks again for the comment!

  0