Responsive desing using flexbox and media querys

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾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!

  Marked as helpful

  1

  ---

  

  Cristian Garbarino•40

  @cristiang3011Posted over 2 years ago

  @correlucas Thank you for your suggestions. hope you have a great day.

  0
• 

  Adriano•38,390

  @AdrianoEscarabotePosted over 2 years ago

  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 👍

  Marked as helpful

  1

  ---

  

  Cristian Garbarino•40

  @cristiang3011Posted over 2 years ago

  @AdrianoEscarabote HI! Thank you, I really appreciate your suggestions, they help me a lot.

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @AdrianoEscarabote

  Hi there! Next time, please avoid asking people to mark your comments as helpful. It is against the community guidelines and places unnecessary pressure on the solution author to mark the comment as helpful.

  The idea is to give people feedback to offer helpful support without the expectation of anything. If they do mark the comment as helpful, then that's a nice bonus. 🙂

  2