single-price-grid-component-solution

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  To center .outer-box on the page using flexbox, replace the height in the main with min-height: 100vh.

  The body has a wrong background-color.

  Give .outer-box a fixed width value. e.g width: 600px and give a max-width value in the media query for a responsive content.

  Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  1

  ---

  

  Muhammad Usama Nasir•20

  @UsamaVPosted almost 2 years ago

  @Hassiai Thanks a lot for the tips. These are really helpful suggestions :)

  0
• 

  Krzysztof Rozbicki•370

  @KrzysztofRozbickiPosted almost 2 years ago

  I am using something like that:

  body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  

  Then you can put the container in your <main> (with border-radius and box-shadow, and maybe the max-width if necessary) and here you go - all content is centered. You can add: position: relative; to your body if you want to position some elements outside the centered box. (e.g. footer etc.) It all depends on the project - but with these kind of component pages i think the flex solution is the best :)

  Marked as helpful

  1

  ---

  

  Muhammad Usama Nasir•20

  @UsamaVPosted almost 2 years ago

  @KrzysztofRozbicki Thanks a lot for the detailed explanation, it surely is helpful.

  0