Huddle landing page

Community feedback

• 

  Tjaša Žilavec•590

  @TjasaZilPosted almost 2 years ago

  Hi Mzu Soci,

  good job on the challenge. I remember struggling with it myself when I first tried to solve it. I looked at your code and live site and I have a suggestion that you may take into account.

  At @media (min-width: 600px) you change your wrapper to have max-width: 1100px;. The wrapper is wider than the screen and it looks cut off on screens that are less than 1100px wide. Based on your code I think that the best solution is to change @media (min-width: 600px) and @media (max-width: 600px) to @media (min-width: 1050px) and @media (max-width: 1050px). You can also eliminate the .wrapperclass from the @media (min-width: 1150px) and add width: 1100px; to the .wrapperthat is outside the media queries.

  I hope my writing makes sense. Keep up the good work! Cheers 🥂

  Marked as helpful

  0
• 

  Adriano•38,060

  @AdrianoEscarabotePosted almost 2 years ago

  Hi Mzu Soci, how are you? I really liked the result of your project, but I have some tips that I think you will enjoy:

  The hero image has a color slightly different from the Figma design, if you want to match the color you can reach this using mix-blend-mode with mix-blend-mode: multiply;. The multiply will make the image blend the div background and the opacity will make the image less evident and improve the blend between image/purple div. See the code below:

  img { 
      mix-blend-mode: multiply; 
      opacity: 0.8;
  }
  

  Add a padding to the body, so that the content in lower resolutions doesn't hit the edge of the screen!

  The rest is great!

  I hope it helps... 👍

  0