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

Responsive Single Price Component

Brian 80

@briangesteban

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


Feel free to leave a feedback. Any feedbacks are appreciated. Thank you in advance!

Community feedback

Vanza Setia 27,795

@vanzasetia

Posted

Hello, Brian!

I recommend making the first <h2> as <p> that has <strong> instead. It is not a sub-title of the card. Then, remove html { min-height: 100%; }. It is better to do body { min-height: 100vh } instead. It is best to treat the <body> as the main element of the web page instead of <html>.

After that, use flexbox or grid to place the card in the center of the page. These modern techniques are more robust than absolute positioning and have less code to write.

I hope this helps. Happy coding!

Marked as helpful

1

Brian 80

@briangesteban

Posted

Hi, @vanzasetia! Thank you for the feedback. I will take note of these and apply it to my next challenge. I really appreciate it!

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