Responsive landing page using css/html

Community feedback

• 

  David•8,000

  @DavidMorgadePosted about 2 years ago

  Hello Marko, great job getting the solution for this challenge! it doesn't matter on your first project how you do it, the important thing is to be able to finish it, great job.

  I think that you could improve your project centering your card using flex-box in the parent element instead of margins, it will be easier and it will work for all type of sizes. If you want to try it yourself or know how to do it here is the way:

  First of all you should remove the margins, from your section and the div wich the container class.

  After that just apply flexbox on your body with a min-height: 100vh that will make your body take the full screen of any browser, something like this:

  body {
    margin: 0;
    padding: 0;
    font-family: "Montserrat", sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
  }
  

  Since you also have your component inside other html tag , you will have to center there too:

  #main {
    width: 1000px;
    height: 600px;
    margin: 10% auto;
    overflow: hidden;
    background-color: hsl(30, 38%, 92%);
    border-radius: 2%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  

  Try practicing with flex-box and grid, avoid as much as you can using position: absolute / relative, you can practice flex-box with a game called flexbox-froggy.

  Hope my feedback helps you!, go on and practice flex-box and css grid, you will not regret it!

  Marked as helpful

  0

  ---

  

  Marko Djurdjevic•210

  @FrozennnPosted about 2 years ago

  @DavidMorgade Hey David, thank you very much for your feedback I agree using flex-box seems a lot better. I will try my next challenge with flex-box.

  0