Skip to content
Submitted 10 months ago

I used the flexbox layout technique for this challenge.

D'émils Dingui•40
@Demils13
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Single price grid component
  • HTML
  • CSS
1newbie

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

  • Yishak Zewdineh•80
    @yzewdinehPosted 10 months ago

    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
    D'émils Dingui•40
    @Demils13Posted 10 months ago

    Hi Yishak,

    Thanks for your feedback, I take note.

    1

Please log in to post a comment

Log in with GitHub

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