Results Summary Solution

Hello there!

You've matched the desktop design really well!

To get your mobile design to work you need to set up a media query at about 550px. Change the containers flex-direction to column and the width to 100%. Then you need to change your box and summary classes to width 100% too.

Initially if you want a responsive design you can set the containers width to 100% and max-width to the widths in the design. Then set your box and summary widths to 50%.

The method you used to center the container i think is fine for small components like this, however for any larger challenges you should not be using this. It can add a flicker effect to the page as it loads in larger projects.

You might also want to start using rem units instead of px. This video is passed around a lot with people who are new to choosing the right units for certain things, so I thought id link it! https://www.youtube.com/watch?v=N5wpD9Ov_To

Happy coding!

Nice Job! I think if you use the propertie flex-wrap: wrap; in your flex container it's a start. I take a look only in the developer tool and add it there, of course there another behaviours to treat but it's a start. Hope it would help.