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, grid, mobile first

John 210

@gt78x

Desktop design screenshot for the Single price grid component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Hassia Issah 50,670

@Hassiai

Posted

Replace <h2> with <h1> and <h3> with <h2> to fix the accessibility issue.

There is no need for min-height:100vh in the body. add min-height:100vh; to the main and remove margin-top 10vh from the main to center .container on the page. You forgot to change the font-color of p in .join community.

Hope am helpful Happy coding

Marked as helpful

1

John 210

@gt78x

Posted

@Hassiai Thanks!

0
Favour 2,140

@Nadine-Green

Posted

HEY JOHN!

I noticed that you have an issue with centering, a quick fix for this would be the give the body a height of 100vh height:100vh then a display of grid display: grid and then using the code place-items: center

HOPE I COULD BE OF HELP :)

HAPPY CODING!

Marked as helpful

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