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-Component

Charles 170

@cacti00

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


All feedback will be highly appreciated

Community feedback

Account Deleted

Hello @cacti00 😊

Your solution is great✨ and congratulations for successfully completing a newbie challenge🎉

and there is a small suggestion that might be helpful for you

  • min-height :

You can use min-height instead of height

because height will put your element to a size of 100% of it's container. min-height will put the element to min 100% of the container size.

if we set min-height: 100vh then the main will start at 100vh, if the content pushes the main beyond 100vh it will continue growing. However if you have content that takes less than 100vh it will still take 100vh in space

and it will helpful when you make responsive solutions

  • Use List :

Why Us section is a list of features so instead of multiple <p> tag you can use unordered list

You also can take a look of my solution

Hope that was helpful 😊

Marked as helpful

0

Charles 170

@cacti00

Posted

Thanks a lot I’ll work on making my website more responsive @MrSandipSharma

0

Account Deleted

@cacti00 I am glad that was helpful for you😀

0
Aimal Khan 2,260

@Aimal-125

Posted

In your CSS code, give body element height of 120 or 150vh by using media query with max-height: 400px; for screens with small heights so that your web app look good on small screens.

0

Charles 170

@cacti00

Posted

Noted thanks@Aimal-125

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