Submitted almost 3 years ago

QR Code Component

Jackie Codes•50

@jackiecodes2021

Preview site View code

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 almost 3 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

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