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

Mobile First Single Price Grid

@artcar01

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
Grace 27,930

@grace-snow

Posted

Hey Arturo

This looks pretty sweet!

Content goes a little squished sometimes (narrow) and forces a vertical scroll when it doesn't seem necessary, all because of the way you are positioning with percentage based margins.

I would recommend a few things:

  • using a max-width and margin-left and -right auto on your containers
  • setting your sign up button to be display block and then giving it much smaller padding values (so it istn't forced to wrap onto 2 lines on small screens)
  • adding hover and focus states to your button (with a type="button") too
  • changing your heading levels so they go in order and don't jump eg h2 to h4 to h3 - all the smaller headings belong to the top one. (you can style these with classes, but using the correct html element is very important for assistive technology)

I'd add that it's perfectly valid to do your layout in flexbox, as you have done. But this is a challenge that is ideal for CSS grid instead.

Hope all that's helpful! Looking in good shape

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