Huddle landing page with flexbox and grid

Community feedback

• 

  Alex•660

  @al3xbackPosted about 3 years ago

  Hi Jane,

  When i tried to open on smaller desktop height, i could not scroll to see the overall content, looks like it's affected by overflow: hidden

  0

  ---

  

  jjjayed•270

  @Jane72-boopPosted about 3 years ago

  @al3xback Thanks for telling me, sorry I didn't consider that possibility the first time. Would setting the max height for the body 100vh okay? If I didn't do that the image will add unnecessary height in the page.

  0

  

  Alex•660

  @al3xbackPosted about 3 years ago

  @Jane72-boop Hi Jane, adding max-height is also unnecessary. That extra space comes from margin on .comp class (margin: 8em auto).

  We can try to reduce the margin value and setting body to be able to center the content.

  • step 1: on body, change from max-height to min-height, and add extra properties to center the content.

  body {
     ...
     max-height: 100vh; //remove
     min-height: 100vh; //change to this
     display: flex; //add
     justify-content: center; //add
     align-items: center; //add
  }
  

  • step 2: reduce margin value from .comp class.

  @media only screen and (min-width: 1000px) {
     .comp {
        ...
        margin: 3em auto; 
     }
  }
  

  Hope this helps :)

  Marked as helpful

  0