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 component

Jason 130

@mrjasonu

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

imad 3,330

@imadvv

Posted

Greetings Jason! Congratulations on completing this challenge!, you can add this media query to make your solution responsive on mobile view,

@media (max-width: 45rem) {
  .container {
    width: calc(100vw - 2em);
    min-height: 100vh;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr;
    grid-template-areas:
      "a"
      "b"
      "c";
  }
}

Happy coding and keep up the good work 👍

Marked as helpful

1

@omerome83

Posted

Great job on finishing.

I would just suggest adding a hover state in your CSS when you mouse over on the "Sign Up" button.

.signup-button:hover {
  background-color: hsl(71, 73%, 65%);
}

Something like this, for example, would give the user an indication the link is "live".

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