Skip to content
Submitted over 2 years ago

QR Code Component

Jackie Codes•50
@jackiecodes2021
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

Hello! Can somebody please help me to better suit this project for device responsiveness? I used a media query to cater to 375px width as defined in the style notes for this project, but it only reflects the change when I manually resize the browser and does not reflect the change when I use the browser's 'inspect' tool. Thanks in advance for any help!

Community feedback

  • Rio Cantre•9,690
    @RioCantrePosted over 2 years ago

    Hello there! Good job in completing this project. Looking at your solution, I would recommend the following for you...

    • Remove all the properties in body rule set except for background-color: hsl(212, 45%, 89%);
    • In .qr-cont, remove display: flex;, flex-direction: column;, justify-content: center;, align-items: center; , padding-left: 15px; and padding-right: 15px;. Adjust the following into: width: 300px; , height: 450px; and border-radius: 10px;
    • In .qr rule set, remove height: 200px;, display: flex; and align-self: center;. Add margin: auto; and padding: 1.5rem;. Adjust border-radius: 30px;
    • In #cont-title rule set, adjust font-size: 22px; and add margin: 0 1rem;
    • In the #cont-des rule set, add margin: 0.6rem 1.5rem;
    • Add margin-top: 8rem; in .main rule set
    • Remove height: 550px; in the media query

    Above all, great work in completing the project. Hope this helps and Keep it up!

    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