Product Review Card Solution

Hello Alex, congratulations for your solution!

I'll propose you a grid exercise to create this component the easiest as possible. The best way to build this component with two columns is by using GRID LAYOUT since it is simpler to manage the columns and then create the media query for mobile. Here’s the steps to create it with grid create the main block to hold all the content (you can use <main> to wrap), set its width as max-width: 900px (it's the container size) and display: grid / grid-template-column: 1fr 1fr(this means that your component will have two columns with 50% of the container width each thats 450px).

Then to create the mobile version, all you need to do is to change the container flow vertically with grid-template-column: 1fr.

Try this approach and you'll never want to use flex to create layouts, just to manage content.

Hope this helps, happy coding 👍

Hello Alex, congrats on finishing the challenge! almost got a pixel perfect!

I tried to replicate your bug but its not happening to me, I added this structure:

<section class='card'>
    <div class='container'>
        content
    </div>
</section>

And still works the same as with no container div, could you explain further or replicate the bug and upload it to github? Now curiosity is killing me about a flex getting column without specifying it!