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

Submitted

Newbee - Flexbox, CSS, HTML

@DanielGibsonOrchid

Desktop design screenshot for the Single price grid component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

P
Matt Studdert 13,611

@mattstuddert

Posted

As far as px vs em I'd actually recommend looking into using rem units. They look directly at the html font-size and so are much easier to use than em units, but much more flexible/maintainable than pixels.

1

@DanielGibsonOrchid

Posted

Thanks Matt. This website is very helpful. Thanks for the advice on using rem.

What do you think about padding/margins, best to use percentage?

What about declaring the size of a section, best to use width/height on the <section> tag or let the content fill the section and adjust the size with padding/margins?

0
P
Matt Studdert 13,611

@mattstuddert

Posted

I would also recommend rem for padding/margins, as then spacings scale down with the text size as it changes for different screen sizes.

I very rarely set height on an element. It's usually much better to just add padding-top and padding-bottom and then let its height be dictated by the content inside.

1
SimpleMB 260

@SimpleMB

Posted

Looks awesome! Try to use <section> not <div>. Why Us is better with item list <ul> and <li>.

1

@DanielGibsonOrchid

Posted

Thanks for the feedback. Will use it for next time

0

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