Huddle Landing Page (Using FlexBox)

Community feedback

• 

  Eray•1,410

  @ErayBarslanPosted about 2 years ago

  Hey there, excellent work on this one! Some suggestions to improve the solution:

  • Between 500px and 1000px content overflows out of screen. You can fix this by changing the media-query.
  • If the page contains article/text in it, you'd always want to set a max-width on the container so a user with huge screen still has a good reading experience. Otherwise you'd end up having 1 line paragraphs. With a little refactor you can use:

  body {
  
      ...
      justify-content: center;
  } 
  /* Container isn't centered horizontally as it is. You can add justify-content */
  
  .div__card {
  
      ...
      max-width: 680px;
  }
  /* This matches the design and have a better visuals for both mobile and desktop */
  
  @media (max-width: 980px) {
  
    ...
  }
  

  With these changes your page becomes fully responsive for all screens. Also I'd suggest designing mobile-version first. It's a personal preference after all but general convention is to start with mobile version and I find it much better approach. You'd prevent any possible overflow since your base CSS is for small screens. Also desktop layouts happen to be more complex. With desktop first approach, we're simply removing the complexity; but we wouldn't need this with mobile first design. Happy coding :)

  Marked as helpful

  0
• 

  バレンタイン 😈•64,190

  @VCaramesPosted about 2 years ago

  Congrats on completing this challenge!

  Currently your background begins to move out of place when it the screen shrinks, to fix change the background-size to cover

  Marked as helpful

  0