Skip to content
Submitted over 3 years ago

QR code component

👾 Ekaterine Mitagvaria 👾•7,860
@catherineisonline
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hello, Frontend Mentor community! This is my solution to the QR code component.

I have read all the feedback on this project and improved my code. Due to the fact that I published this project very long ago, I am no longer updating it and changing its status to Public Archive on my Github.

You are still free to download or use the code for reference in your projects but I longer update it or accept any feedback.

Thank you

Code

Please log in to post a comment

Log in

Community feedback

  • Martin Kamír•490
    @Martin-K-Kamir

    Hi, i really like your solution. If i could suggest you few things from my experience, what i would tweak a little.

    • Since you are using rems. Set to html tag in css font-size: 62.5%. So 1 rem is 10px. As default 1 rem is 16px. So setting it this way will help you calculate how much is 1 rem. For example 32.1rem is 321px :D

    • As @ToHX said set body (or make some container class) min-height: 100vh and center it with flexbox. So you can simplify your code also like @BenjaDotMin commented.

    • For the box-sizing: border-box dont use it on body tag but like this -> html box-sizing: border-box; ... and ... *, *:before, *:after { box-sizing: inherit }. It is better explained here -> https://css-tricks.com/box-sizing/

    Marked as helpful
  • Tobias•100
    @ToHX

    Hi,

    you already have many comments but let me add one too :D

    • font-size: 15px; should be in REM
    • box-sizing: border-box is on the <body> but I think most CSS Reset will use it on the * selector
    • body min-height: 100vh;
    • I did use the <main> and then an <article> element,
    Marked as helpful
  • Benja.min•740
    @BenjaDotMin

    Hello! I see you have very precise margins to centre your card. We could make this far simpler by removing these styles from .qr-container:

    • display flex
    • flex-direction
    • height (both of them)
    • margin
    • align items
    • margin-top (and the media query at 1020)
    • margin-bottom

    Then to your body tag add:

    • display: grid
    • place-items: center
    • height: 100vh

    That should centre your card with less code, but also remove the unrequired scrollbar on mobiles. Hope that helps!

    Marked as helpful
  • JoshuaWBlick•270
    @JoshuaBlick94

    Hey Catherine, If anyone hadn't talked about the shadow, I would have said this was perfect. Well done on this challenge.

    Marked as helpful
  • Han•320
    @hcxweb

    Hello Catherine,

    I like how you added the shadow box. It looks more interesting. I also like how you set the width for qr-container. I was inspired to play with width: min(80%, 20rem), which looks more responsive to me. Anyway, just some thing to share with you.

    Marked as helpful
  • Kamasah-Dickson•5,570
    @Kamasah-Dickson

    I can say its pixel perfect....great work there:) Box shadow here is too much.

    try .....box-shadow: 0px 1px 3px 10px rgba(0, 0, 0, 0.1);

    0px is the x-axis so negative values go to the left side of the box 0 maintains its position.

    1px is also the y-axis negative values shadow s the top of the box >1 shadows the bottom

    3px is the blur radius and the 10px is the spread how the shadows should spread around the box.

    Maybe this could be helpful:)

    https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

    Marked as helpful
  • 2div•170
    @2div

    Both design look same. Good work.

    My design look okay but it look smaller.

    https://www.frontendmentor.io/solutions/qrcode-responsive-design-with-flex-box-mfFGvShdV

  • Sonu Swapan Dutta•530
    @Sonu-Dutta

    Hey! This looks absolutely perfect...

  • P
    Lorentz Bloom•90
    @Lauro235

    Well this is inspiring. I'm going to have to revisit this one ;)

  • Bickey kumar•30
    @Bickeykr

    Really great work, By reviewing your solution I made changes in my solution and learned new things. So, thanks for that.

  • Dante D Roronoa•90
    @bandja047

    I like your card, I don't mind if I copy your css for my next challenges.

    but I think it would be better if the project didn't scroll.

  • Zein•380
    @Zein-MB

    You're just doing fine with this way in designing environment mate ! I liked the responsive part modifying.. Great job as usual Also,, Gratz for the 300 point!

  • Ammar Jalabi•270
    @AmmarCode

    Excellent!

  • Victoria Cheng•320
    @victoriacheng15

    Nice and pixel perfect!

    There are couple things to mention. You can use section tag instead of div for the info-block for semantics purpose! You also can add box-sizing: border-box to * because this tells browser to included margin and padding for the box. here Lastly, you can use caniuse check to see if the browser support certain CSS properties, ie: box-shadow in this case!.

  • Can Surer•80
    @cansurer-at

    Hi Catherine,

    It is so clear that this is pixel-perfect! Awesome. Here is my question, Are there any tools that you're using for pixel perfection? For example, I export the design from Figma or Zeplin then I use Perfect Pixel Chrome Extention although I do like that, the design has some incorrect padding, etc :) Do you have any tips?

  • Thomas Caldwell•40
    @thomasjfcaldwell

    Great Work Catherine

  • Rogelio Delgado Montoro•120
    @RogFed

    Hi Catherine,

    Awesome job on the challenge, the vertical center solution has been mentioned above, besides that I would say this is a done deal.

    Keep coding!!!

  • Shakil Ansary•90
    @ShakilAnsary9

    Awesome!!!

  • Jehan Carlos Hurtado Guerrero•720
    @Jank1510

    Woof! Great job

  • Account deleted

    Hey! I'm beginner I'm focusing in newbie level and I'm just curious that solution and design needs to be look the same 100%?

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