product-preview-card

Community feedback

• 

  P

  Jacksen•350

  @jacksen30Posted about 1 year ago

  Hello MTALAFA,

  Great work keeping up the momentum and submitting another challenge solution !

  I've just taken a quick look I think one of the main issues here is that the body doesn't have a height, so the total body height is only the height of the .container if you have a look in your dev tools and highlight the body element in the DOM / Elements you'll understand.

  Here's is a way that you could achieve what you are trying to:

  body {
      background-color: hsl(30, 38%, 92%);
      font-family: "Montserrat", sans-serif;
      
      /* ADDED THE BELOW PROPERTIES */
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center; 
  }
    
    .container {
      display: flex;
      
      /* REMOVED THE BELOW PROPERTIES */
      /* margin-top: 12rem; */
      /* justify-content: center; */
    }
  

  Hopefully this suggestion will help you enough to get unstuck with the centering of the main container, even if this isn't the solution that you decide on implementing.

  Marked as helpful

  0

  ---

  

  Mtalafa•350

  @MtalafaPosted about 1 year ago

  @jacksen30 thanks. now it looks like the design

  1