Submitted 11 months ago

Single Price Grid Component (HTML & CSS)

Gioant• 160

@Gioant

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Single price grid component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hey All,

I am curious as to how you guys managed to get pixel perfect designs in regards to font-sizes, spacing (padding, etc..) & opacity. As it was difficult for me to get it perfect.

the style guide mentioned a font size of 16px for body but it was kind of mis-leading as some elements are definitely not 16 px in my opinion.

Community feedback

Jennifer Souza• 340

@zoedarkweather

Posted 11 months ago

Hi, my understanding is that pixel-perfect is kind of impossible and isn't as important as faithfully implementing the spirit of the design. It can even actually cause issues (not least of which is making you frustrated lol). Here is a good article on this idea https://www.joshwcomeau.com/css/pixel-perfection/.

Regarding font size - my understanding is that the body text font size refers to paragraph font size. 16px is the default p font size though so if it says 16px you don't need to specify that. Also, even though the style guides will have a font size in px, it's best to translate that into rem in your css to make sure it's accessible. Hope this helps.

Marked as helpful

P. Ricardo• 2,370

@pRicard0

Posted 11 months ago

You can use an extension named PerfectPixel

Anyway, you don't need to care about that. It's a waste of time. Have you ever stopped to think about how much time you waste testing? It's enough time to have already created another project or studied more.

Please log in to post a comment

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