@Terra42Submitted over 1 year ago
What tools do you use to make sure your code solution is "pixel-perfect" when you don't have access to the measurements in design files?
Q8LPs6Vs
@Q8LPs6VsAll comments
- @Q8LPs6VsPosted over 1 year ago
If I don't have access to the design files I'll just use whatever styles are provided, a color picker, and then eyeball the rest. Don't worry too much about getting pixel-perfect results. Visually your solution is perfectly fine IMO.
You probably want to replace the height on .container with min-height, so your design doesn't get cut off with smaller viewports.
As far as the design itself is concerned, I'd personally bump up the font weight of the "per month" and the "Why us" section a little bit. Also there's a box shadow on the component that you could add.
Really good job!
0 - @KylePetriccaSubmitted over 1 year ago
Here is my first take at the QR Code Challenge!
It was a fun challenge, and I only had a few struggles during creation. I had a bit of trouble with how to center the container vertically, so if anyone has any suggestions on how I can achieve this better than I have, it'd be greatly appreciated.
Also, if you think any areas could be refactored to reduce code bloat, please tell me! As I believe sometimes, I can use too many lines to achieve something that could be done in a much cleaner fashion.
@Q8LPs6VsPosted over 1 year agoYou did the centering right. No need to change it. HTML is fine.
I'm not sure how I feel about the position: absolute on the body. Without it you don't need to set a width and height on the body. The padding on the body isn't really needed either I think, and causes a vertical scrollbar for me.
"Container" and "wrapper" are IMO words used for the same purpose - which in your case is fulfilled by the wrapper class - maybe consider giving the container class a different name.
You could use the <main> tag for the div with the class container, which is semantic HTML. Also, the attribution div could be <footer> instead, which will remove the notice you probably get in the accessibility report.
I don't really any reason for the <br /> in the paragraph. Also, the margin 0 auto on .container doesn't really do anything because you already centered it with flexbox.
Some other small things:
You could change the font-size from px to rem and the margin / padding to em if you know how.
margins, box-shadows etc: Instead of 0px (or whatever unit you use) you can just write 0.
height: auto on the img doesn't do anything here, I think.
Either way, it's small details, good job on the project!
Marked as helpful1
