QR code component
Design comparison
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
Community feedback
- @Martin-K-KamirPosted over 2 years ago
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 helpful1@catherineisonlinePosted over 2 years ago@Martin-K-Kamir Thanks for the feedback, means a lot.
1 -
- @ToHXPosted over 2 years ago
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 helpful1@catherineisonlinePosted over 2 years ago@ToHX Thank you for the feedback! I appreciate
0 - @BenjaDotMinPosted almost 3 years ago
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 helpful1@catherineisonlinePosted almost 3 years ago@BenjaDotMin I will try that for sure! Thanks!
1@JoshuaBlick94Posted almost 3 years ago@BenjaDotMin This is a another way around it but I feel like flex-box does the same thing.
0@BenjaDotMinPosted almost 3 years ago@JoshuaBlick94 As always in web dev, there is many ways to achieve the same, you are right.
0 - @JoshuaBlick94Posted almost 3 years ago
Hey Catherine, If anyone hadn't talked about the shadow, I would have said this was perfect. Well done on this challenge.
Marked as helpful0@catherineisonlinePosted almost 3 years ago@JoshuaBlick94 Thanks! I would make it a little bit less probably but it's not horrible as it is now.
0 - @hcxwebPosted almost 3 years ago
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 helpful0@catherineisonlinePosted almost 3 years ago@hcxweb Thank you for the feedback!
0 - @Kamasah-DicksonPosted almost 3 years ago
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 helpful0@catherineisonlinePosted almost 3 years ago@Kamasah-Dickson Yeah, box-shadow definitely too much, thanks for the tip
1 - @2divPosted over 2 years ago
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
0 - @Sonu-DuttaPosted over 2 years ago
Hey! This looks absolutely perfect...
0@catherineisonlinePosted over 2 years ago@Sonu-Dutta Thank you!
1 - @Lauro235Posted over 2 years ago
Well this is inspiring. I'm going to have to revisit this one ;)
0@catherineisonlinePosted over 2 years ago@Lauro235 Thank you!
0 - @BickeykrPosted over 2 years ago
Really great work, By reviewing your solution I made changes in my solution and learned new things. So, thanks for that.
0@catherineisonlinePosted over 2 years ago@Bickeykr Glad, it was useful!
1 - @bandja047Posted almost 3 years ago
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.
0@catherineisonlinePosted over 2 years ago@bandja047 Thank you. yes, feel free to use it
0 - @Zein-MBPosted almost 3 years ago
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!
0 - @AmmarCodePosted almost 3 years ago
Excellent!
0@catherineisonlinePosted almost 3 years ago@AmmarCode Thank you!
0 - @victoriacheng15Posted almost 3 years ago
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-boxto * 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!.0@catherineisonlinePosted almost 3 years ago@victoriacheng15 thanks for the feedback!
0 - @cansurer-atPosted almost 3 years ago
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?
0@catherineisonlinePosted almost 3 years ago@cansurer-at Hey, yes I use Figma and Perfect pixel as well, nothing else! Also, need to make sure that your computer resolution is set to1440px wide as the design image they provide is for 1440px.
1 - @thomasjfcaldwellPosted almost 3 years ago
Great Work Catherine
0@catherineisonlinePosted almost 3 years ago@thomasjfcaldwell Thanks!
0 - @RogFedPosted almost 3 years ago
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!!!
0 - @ShakilAnsary9Posted almost 3 years ago
Awesome!!!
0@catherineisonlinePosted almost 3 years ago@ShakilAnsary9 Thank you!
0 - @Jank1510Posted almost 3 years ago
Woof! Great job
0 - 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%?
0@BenjaDotMinPosted almost 3 years ago@troy03 I think this would be quite an open answer, in a "real world" situation. Obviously a client would be very happy with this solution, as they probably wont see an "overlay" to notice the shadow, for example. On the other hand I would say yes, its good to push yourself to get things pixel perfect, but not 100% required for "real world" solutions. Obviously you want to get as close as possible, and actually resemble the design closely (lets say over 90%). But the overlay design here is just to improve yourself or help people quickly spot faults.
2Account deleted@BenjaDotMin Thank you for replying much appreciated!.
2
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