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

flexbox and grid CSS

@gianback

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


I hope your feedback to improve, thank you!

Community feedback

@pikapikamart

Posted

Hey, awesome work on this one. Layout in desktop looks really good, the layout responds well as well and the mobile layout is good.

Some suggestions would be:

  • Avoid using height: 100vh on a large container like the main element or a body or just a large container. This makes the element's height limited to the remaining viewport/screen's height. Instead, you can just remove it or replace it with min-height: 100vh, this takes full viewport and will expand if it needs to.
  • The text after the h1 could have just use p tag and not a heading tag.
  • Lastly, adjust the breakpoint for mobile layout, showing the mobile layout at only 360px is very little. Also it would be great that you practice a lot using mobile first layout. This will really help you to manage breakpoints.

Just those above, really great job on this again.

1

@gianback

Posted

Thank you for your comment, I will really put it into practice, thank you very much again

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