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-Grid with Flex & Grid

PadseFIAE 70

@PadseFIAE

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


The left and right card in the bottom of the main card are difficult to place correctly with Flex. I choose grid, and it was for this solution the best for me.

I learnd to build mobile first. I will do this in future too.

My goal is to solve all the Challanges to get better.

Community feedback

Travolgi 🍕 31,420

@denielden

Posted

Hello Padse, You have done a good work! 😁

Some little tips to improve your code:

  • not use <br> to make space because it's for break line of text... use margin property
  • use main tag to wrap the card and improve the Accessibility but not as a container of that one element inside it
  • also you can use article tag instead of a simple div to the container card for improve the Accessibility
  • use ul element instead of p with multiple <br> inside for the list Why us
  • use min-height: 100vh to body instead of height, otherwise the content is cut off when the browser height is less than the content

Keep learning how to code with your amazing solutions to challenges.

Hope this help 😉 and Happy coding!

Marked as helpful

0

PadseFIAE 70

@PadseFIAE

Posted

@denielden thank i for ur awesome reply! I am shure this will Help me in future Projects :)

1
Travolgi 🍕 31,420

@denielden

Posted

@PadseGaming you are welcome! keep it up :)

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