Submitted about 2 years ago

Responsive QR code using HTML/CSS

Jeremy• 140

@Duck322

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Fun first project! Total noob here so any suggestions are welcome. I did the best I could with the responsiveness, but I feel like it could be a little better, I'm not sure if I got my media queries right or if there is a better way to achieve a responsive page for this challenge?

Community feedback

Lucas 👾• 104,420

@correlucas

Posted about 2 years ago

👾Hello Jeremy, congratulations for your first solution! 👋 Welcome to the Frontend Mentor Coding Community!

Your solution is great and the code is working, but the html structure can be reduced by removing unnecessary divs, all you need is a single <main> or <div> to keep all the content inside, and nothing more. The ideal structure is the div and only the image, heading and paragraph.

<body>
<main>
<img src="./images/image-qr-code.png" alt="Qr Code Image" >
 <h1>Improve your front-end skills by building projects</h1>
<p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
</main>
</body>

You can use relative units as rem or em that have a better fit if you want your site more accessible between different screen sizes and devices. REM and EM does not just apply to font size, but to all sizes as well.

✌️ I hope this helps you and happy coding!

Marked as helpful

David• 8,000

@DavidMorgade

Posted about 2 years ago

Hello Jeremy, congrats on your first challenge! great job on your first solution, welcome to the community

In this project there is no need of media querie usage, you can just get the result for both solutions (mobile and desktop) styling on the same sizes.

Here are some changes I would make:

Instead of using all margins on your main, remove them and use flex-box in the parent element to center your component in the middle of the screen, you can give your body a size of min-height: 100vh and then use flex to center the component like this:

body {
  background-color: #d6e2f0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

If you use this and remove your margins, you will notice that your component is centered but grows with the screen, give it a max-width: 20rem on your main so the component keeps the same size until it reaches smaller resolutions (it will skretch at mobile, thats why I used max-width instead of just width!)

Hope my feedback helps you, if you have any type of question, don't hesitate to ask!

Marked as helpful

Jeremy• 140

@Duck322

Posted about 2 years ago

@DavidMorgade Thank you David, very helpful!

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