flexbox huddle landing page

Community feedback

• 

  Elaine•11,360

  @elaineleung

  Posted almost 3 years ago

  Hi Adam, welcome back! 😊 I think this was well put together, and the two suggestions I have are, on a wide screen (which is what I'm viewing it with), the contents look really stretched out. You can try using a container in both the header and main sections to keep things from stretching past a certain width. This is also the suggestion I gave someone else earlier regarding this challenge, and this is the code I gave:

  HTML:
  
  <header>
     <div class="container">
      // rest of your content
     </div>
  </header>
  <main>
     <div class="container">
      // rest of your content
     </div>
  </main>
  
  CSS:
  .container {
     max-width: 1440px; // this is just a suggested value, do experiment!
  }
  

  The other suggestion also concerns screen sizes and breakpoints; at around the 1000 and 900px browser width, the text starts to get really squished, and I can also see the image being a bit distorted while it pushes the text off the screen. I also see the scroll bar, which probably is another sign that things are being pushed out. For the img, try adding object-fit: contain firstly, and then to handle the flexbox columns, you can leverage flexbox's flex property on the children:

  // feel free to experiment with these values!
  
  .illustration {
     flex: 1 0 50%;
     width: min(50%, 40rem);
     object-fit: contain;
  }
  .content {
     flex: 1 1 50%; 
  }
  

  You may also want to decrease some of the padding you have on the sides. Hope you have a chance to test this out on a big screen first also, and then maybe you'd see what I'm trying to describe here. Anyway, other than that, great work!

  10

  Marked as helpful
• 

  Adam M•550

  @AdamMzkr

  Posted almost 3 years ago

  Thank' s a loot for your comment. I know about breakpoints but i don't focus on it. I want to finish all newbie level challenges.( I FINISHED 17 chellenges) and in the next level I will more focus on all aspect of design. But your comment it's really important for me, because you are experience user.👋. I am still amateur 😉.

  00