Responsive single price grid component

Hello Raz, congrats on finishing the challenge!

Normally on a real project, you need to structure you CSS for 3 different type of sizes, mobile (375px to 768px), tablets (768px 1440px) and desktop (1440px+).

You can either take a mobile first approach, and build your site from a mobile device size, starting with no media querie usage, and then adapt it to tablet using @media (min-width: 768px), and then adapting to desktop using @media(min-width: 1440px). Or you could take the desktop first approach and start building your project from a desktop sizes, then adapt it to the other sizes using @media (max-width: 1440px) for your tablet size styles and @media(max-width: 768px) for your mobile size styles.

Hope my answer helps you! if you have any question don't hesitate to ask!

👾Hello Raz, congratulations for your new solution!

I've checked your live site and the code and I've some considerations for you:

To improve your solution alignment the best thing you can do is use flex to give the alignment and min-height: 100vh to make the child element align to the body knowing that the container will be ever aligned to the screen center now that the body display 100% of the screen height.

body {
    min-height: 100vh;
    font-family: "Karla", sans-serif;
    font-size: 16px;
    background-color: hsl(204, 43%, 93%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

REMOVE THE MARGINS

.container {
    /* margin: 12rem 25rem; */
    /* height: 40rem; */
}

The second most important thing is to create container and responsive cards using max-width to allow the container contract to fit the screen before the media query.

👋 I hope this helps you and happy coding!

Hey Raz!

Congrats on the solution, it is very close to the initial design!

Regarding the responsiveness, with the way you structure it, you would need to use quite some media queries and restructure a lot of the code for each size.

The easiest way would be to use flexbox or css grid, to position everything. This way you would require substantially less media queries.

I hope it helps!

Happy Coding :)