Skip to content
Submitted 10 months ago

QR code component page

jabnakar•20
@jabnakar
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 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

  • Yusuf K. Muhammad•570
    @kyusufmPosted 10 months ago

    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
    @jabnakarPosted 10 months ago

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

    0
    Yusuf K. Muhammad•570
    @kyusufmPosted 10 months ago

    @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

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