Skip to content
Submitted about 1 year ago

QR Code Component using HTML and CSS

Priyanka Roy Choudhury•100
@PriyankaRC16
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hi everyone!

I hope this message finds you well.

I have completed my second project on the QR Code Component. I found this project a bit challenging in terms of responsiveness, and making the background colour of the page.

Please feel free to share your feedback for the following:

  • I wanted to understand how is my responsiveness to the design. Please feel free to share your insights.

  • I tried setting the background colour of the page and tried to work on the height and width of the page, but I noticed that there is a scroll bar which allows me to scroll down and I can see that there is some white background (both a bit at the top and at the bottom). Can anyone tell me how I can work on this?

  • Any other feedback will be greatly appreciated.

Your considered feedback is of great importance to me, and I genuinely look forward to your expert insights.

Thank you for your time and attention.

Warm regards,

Priyanka

Community feedback

  • Kulyk-Volodymyr•660
    @Kulyk-VolodymyrPosted about 1 year ago

    To fix white lines:

    body {
  margin: 0;
}

    On this page you can center component:

    body {
  display: flex;
  align-items: center;
  justify-content: center;
}

    But after that there will be a space under the component. To fix it - add to body min-height: 100vh. And then remove background-color from .body-card and put it in body.

    Marked as helpful
    0
    Priyanka Roy Choudhury•100
    @PriyankaRC16Posted about 1 year ago

    @Kulyk-Volodymyr Thank you very much.

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord