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

using flexbox

esraagamal 600

@EsraaGamal-22

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


rate my design please, Any feedback and suggestions on how I can improve are very welcome!

Community feedback

Connor Z 5,115

@zuolizhu

Posted

Hi esraagamal,

Nice try on this project 👏! The responsive from mobile to desktop looks good!

However, I feel the color of the signup button is too bright. It is hard to see the text "sign up" on my screen. #C0DF33 would be a better color for that button 🤓.

I would also add a max-width: 1110px; to the container, so that it would not stretched out on larger size screen.

Happy coding 🙌!

2

esraagamal 600

@EsraaGamal-22

Posted

@zuolizhu I already edit my code for the color of the button, but I have a question, how do you determine the exact max-width?

0
Connor Z 5,115

@zuolizhu

Posted

@EsraaGamal-22 The updated code looks good!

There are few ways to get the exact max-width.

The easiest way to know it is to subscribe the PRO plan and download the sketch file, you will get the exact width for the card within the sketch file. I've been done some projects so I knew the common max-width that frontendmentor would use is 1110px .

Another trick you could do, is using Adobe XD or Figma (those two are free) to open the design file (the jpg file comes within the starter code), then you can draw a rectangle to measure the width.

I hope these helped. Happy coding 🙌!

0
esraagamal 600

@EsraaGamal-22

Posted

@zuolizhu Ok, thanks alot for your help

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