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

I used the flexbox layout technique for this challenge.

@Demils13

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


This is my fourth challenge of Frontend Mentor. Everything I did, was almost perfect, but I struggled to fix the responsiveness of the layout. If you shrink a little bit the page, you can see that, my layout decomposed and I don't understand why at this moment. But I'm still grinding.

Community feedback

@yzewdineh

Posted

Hey D'émils Dingui, well done!

You just need a little tweak to your layout. Instead of making the whole card a flex, better to make the subscription and why-us sections in a container class called .card-body.

.card {
    max-width: 635px;
    margin: 0 auto;
}

.card-body{
    display: flex;
}

.subscription, .why-us {
    flex: 50%;
}

And then on mobile breakpoint, change these parts;

.card{
    padding: 5rem 2rem;
}

.subscription, .why-us {
    flex: 100%;
}

Overall, you did great.

0

@Demils13

Posted

Hi Yishak,

Thanks for your feedback, I take note.

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