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

Single price card

Purdanoskiโ€ข 30

@Purdanoski

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


Hello everyone, It will mean a lot to me if you have a spare time to rate my solution, I am currently learning about Sass so I made this as a test to practice the structure of sass files and folders, what are your opinions? Thank you.

Community feedback

Bryan Liโ€ข 3,550

@Zy8712

Posted

Your site's desktop layout looks pretty good. Main thing I'd work on modifying is your mobile layout using your media queries. Right now when the screen size shrinks your box becomes very squished together. One other thing worth mentioning is that your background color doesn't extend the full length of the page when the screen size is small. This might be due to how you set up your background-color. Make sure its assigned to the body of your site and that the body fills the entire height of the site.

Hope you find this feedback useful. P.S. Your SCSS looks pretty good.

Marked as helpful

1

@MelvinAguilar

Posted

Hello there ๐Ÿ‘‹. Good job on completing the challenge !

  • The structure of your Sass looks good, nicely organized by category. I have a few style suggestions: consider setting a max-width to prevent your component from stretching too much on large screens. You can test this behavior using zoom. Additionally, use a media query for mobile responsiveness; consider adopting a mobile-first approach in future challenges. Lastly, this challenge is perfect for utilizing grid. While flexbox is great, grid might offer an even more straightforward solution.

I hope you find it useful! ๐Ÿ˜„

Happy coding!

Marked as helpful

1

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