QR code component - By harderth

Community feedback

• 

  Eray•1,410

  @ErayBarslanPosted about 2 years ago

  Hey there, congrats on your first solution! Design looks really close to the provided. My suggestions:

  • Instead of fixed width you can use max-width to make the page responsive. by default width: auto which is responsive. As it is, on small screens content overflows.
  • Unless you really need to, don't give height to your elements. Let the width,margin,padding define their height so you won't run into any issues. I've done some refactor to make the page responsive:

      .wrapQR {
        background-color: hsl(0, 0%, 100%);
        max-width: 300px;
        padding: 0 10px 30px 10px;
        border: solid #fff;
        border-radius: 15px;
        margin: auto;
      }
      .QR {
        width: 100%;
        border-radius: 15px;
        margin: 10px auto;
      }
  

  You can keep the rest of styling as it is. With these changes, base design is the same but when screen gets smaller there is no overflowing issue that is due to max-width. Also since your page is deployed now, you can use generate new screenshot option to see how close you are on your design. Hope these helps, happy coding :)

  Marked as helpful

  1

  ---

  

  backpackoder•80

  @MrFougassePosted about 2 years ago

  @ErayBarslan I checked it up and yeah, I still have problems with the responsive when I code, so thank's so much for your tip!

  0
• 

  Bandaru Sindhuja•190

  @SindhujaBandaruPosted about 2 years ago

  Hello @MrFougasse I think you didn't uploaded the entire folder in github.Try uploading Images,design,Readme files in your github repository.Then we can see the design maybe.Its showing 404 error.

  Marked as helpful

  0

  ---

  

  backpackoder•80

  @MrFougassePosted about 2 years ago

  @SindhujaBandaru Hello, I just modified the "Preview site", please check here : https://challenges.challenges-b93.pages.dev

  0

  

  Bandaru Sindhuja•190

  @SindhujaBandaruPosted about 2 years ago

  @MrFougasse I have seen it.Amazing Work👏

  Marked as helpful

  0

  

  backpackoder•80

  @MrFougassePosted about 2 years ago

  @SindhujaBandaru Thank you, I am gonna take a look on the challenges you did too!

  0