Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

QR code component page

jabnakar 20

@jabnakar

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello everyone! I've just completed my first Frontend Mentor challenge, and I'm seeking feedback on my HTML and CSS code. Specifically, I'm interested in thoughts on responsiveness across different devices and suggestions for improving code organization. If there are any accessibility issues or general tips on best practices, please share your insights. Your feedback is greatly appreciated! Thanks!

Community feedback

@kyusufm

Posted

Hallo,

To apply a style to something, we need to understand what the purpose of it. for example in this case, it was a qr-code. it display almost the same size in the desktop and mobile.

so you can set the width with static size. for example 280px, because it will not break even in a mobile (375px screen). using % for a component size in this case is not a good choice.

Goodluck on your front-end journey!

Marked as helpful

1

jabnakar 20

@jabnakar

Posted

@kyusufm Thanks! you are right! I fixed it right away. Thanks for the insightful comment I really appreciate it as a beginner

0

@kyusufm

Posted

@funtikar Glad to hear that.

Another small thing, to make a card in the middle you can add heigh and flex to your body css

body{
height: 100vh;
display: flex;

and you can remove the margin-top on your card and keep margin:auto.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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