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
Log in with GitHub

Submitted

QR code component

👾 Ekaterine Mitagvaria 👾• 7,640

@catherineisonline

Preview siteView code
Desktop design screenshot for the QR code component coding challenge

This is a solution for...

QR code component
  • HTML
  • CSS
1newbie
View challenge

Design comparison

SolutionDesign

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 Kamír• 490

@Martin-K-Kamir

Posted

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

1
Tobias• 100

@ToHX

Posted

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

1
Benja.min• 740

@BenjaDotMin

Posted

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

1
JoshuaWBlick• 270

@JoshuaBlick94

Posted

@BenjaDotMin This is a another way around it but I feel like flex-box does the same thing.

0
Benja.min• 740

@BenjaDotMin

Posted

@JoshuaBlick94 As always in web dev, there is many ways to achieve the same, you are right.

0
JoshuaWBlick• 270

@JoshuaBlick94

Posted

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

0
Han• 340

@hcxweb

Posted

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

0
Kamasah-Dickson• 5,610

@Kamasah-Dickson

Posted

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

0
Kamasah-Dickson• 5,610

@Kamasah-Dickson

Posted

@catherineisonline welcome :)

0
2div• 170

@2div

Posted

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
Bickey kumar• 30

@Bickeykr

Posted

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

0
Dante D Roronoa• 90

@bandja047

Posted

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
Zein• 300

@Zein-MB

Posted

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
Victoria Cheng• 320

@victoriacheng15

Posted

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!.

0
Can Surer• 80

@cansurer-at

Posted

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
👾 Ekaterine Mitagvaria 👾• 7,640

@catherineisonline

Posted

@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
Rogelio Delgado Montoro• 80

@RogFed

Posted

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

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
Benja.min• 740

@BenjaDotMin

Posted

@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.

2

Account Deleted

@BenjaDotMin Thank you for replying much appreciated!.

2

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