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

Price Grid Components with FlexBox

Amaka 100

@amakaogujiofor

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


Please share any feedback you might have about this. Thanks

Community feedback

@UDsGitHub

Posted

Hi Amaka, Your site looks good, there are just a few things you can do to make it work better...

  1. You should have a min-height: 100vh; on your body so it always stretches to fill the entire view height. That would help with aligning the card vertically.
  2. Your card should have a max width... but then again that could make it small on larger screens so dont make the mistake I made of having a max width based on what i could judge from my small screensize.. it seems like the 90% you have now works pretty well, but to make it better, you could use a width of max-width: max(90%, 25rem)-- This would basically choose the bigger width between 90% and 25rem, so on larger screens, it would be 90%, but on smaller large screens, it would be 25rem... assuming 25rem is bigger than 90% of the body's width just note the 25rem i put there is arbitrary.. you should put a value there based on what looks like it works for you.

Aside from all my rambling, you are good! 👍

Marked as helpful

0
P
David Turner 4,100

@brodiewebdt

Posted

Looks good. Responsive layouts work. The only problem is the alignment is off in the two green sections.

Marked as helpful

0
Amaka 100

@amakaogujiofor

Posted

Thanks a lot Udo. CSS can be so funny sometimes,lol

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