Responsive desing using flexbox and media querys

👾Hello Cristian Garbarino, congratulations for your new solution!

Here's some tips to improve your solution:

To make the container responsive replace the width with max-width note that widthmakes your container behave like a block and max-width allow it to contract. Also remove the height thats not necessary because the container height grows with the elements and its paddings.

.container {
    /* background: var(--light-gray); */
    max-width: 1000px;
       display: flex;
    justify-content: center;
    align-items: center;
    /* box-shadow: 0px 15px 50px -30px rgb(0 0 0 / 50%); */
}

To have your solution closer to the design challenge (check the slider and see the difference) you can remove the background from the container and add it to the body, see the changes below:

.container {
    /* background: var(--light-gray); */
    /* box-shadow: 0px 15px 50px -30px rgb(0 0 0 / 50%); */
}
body {
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
    /* background: #f0f0f0; */
    background: var(--light-gray);
}

👋 I hope this helps you and happy coding!

Hi Christian, how are you?

Welcome to the front-end mentor community.

You did a good job on this challenge, but I have a few tips you might like:

1- Document should have one main landmark, you could have put all the content inside the main tag, it would make the code better structured. click here to read about it

2- Page should contain a level-one heading click here

3- I noticed that the background color is not on the entire screen, you could have put the background-color directly in the body, try to remove the width and height of the container.

The result will look similar to the example layout.

the rest is very good. hope it helps... don't forget to mark it as helpful 👍