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
Request path contains unescaped characters
Not Found
Not Found
Not Found
Not Found

Submitted

Single Price Grid Component - Flexbox and Grid

Jim 50

@Jim-Garner

Desktop design screenshot for the Single price grid component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


There are a couple of things I couldn't quite manage, but overall I think I got pretty close.

Community feedback

P
AjeaS 585

@AjeaSmith

Posted

Hi Jim, Great job on this! the mobile and desktop view looks exactly like the design. I'm curious what was it you weren't able to accomplish in this challenge?

1

Jim 50

@Jim-Garner

Posted

@AjeaSmith Hey! Thanks so much for the feedback - yeah I struggled with a couple of things. On mobile the footer is right beneath the content, some margin or padding there would have been ideal, really. The other thing is, it's very minor but still annoying - in the design, the text next to the "$29" is vertically aligned, I couldn't quite manage that with the way that I did things.

But! Onto the next project, everyday's a school day!

0
Pablo 50

@pablowbk

Posted

Hi Jim! If you want to vertically align the "$29" with the text next to it, you could set their containing <p> to be either display: flex, and then align-items: center; you would need to adjust margins, though. A similar approach with display grid could also help you with the vertical alignment. Give it a try !

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