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

VS Code, Responsive, Flexbox, No Figma

@mreed4

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'm thinking that there could be more use of display: flex to achieve the button being aligned with the bottom of the adjacent list?

Community feedback

P

@KrishnaVishwakarma1595

Posted

Hello, @mreed4

Nice solution and congratulations on completing the challenge. I've some points for you -

  • You don't need to provide margin: auto to your .container class. Instead, you can provide this below CSS to your body so the container will be centred vertically & horizontally.
justify-content: center;
align-items: center;
@media screen and (max-width: 375px){
.pricing-and-why-us {
    flex-direction: column;
}
}
  • Instead of max-width: 375px, you should give max-width: 700px, cause between 375 to 700px the design is not responsive and getting overflowed from the screen. Also, you can make the .container class width:100%.

I hope these points will help you.

Happy Coding

Marked as helpful

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