built with flexbox and media queries for responsiveness

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  Hey @webdevhill! Thank you for the mention! I appreciate it!

  The code was definitely improved! Great job! Unfortunately , some parts were overcomplicated, so I made some adjustments to you code (some minor adjustments are still needed);

  * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
  
  body {
      font-family: 'Outfit', sans-serif;
      background-color: hsl(212, 45%, 89%);
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  
  
  .main {
      max-width: 320px;
      background-color: hsl(0, 0%, 100%);
      padding: 15px;
      border-radius: 10px;
       text-align: center;
  }
  
  .img {
      max-width: 100%;
      border-radius: 10px;
  }
  
  .header {
      padding-top: 15px;
      font-weight: 700;
      line-height: 1.5rem;
  }
  
  .body-text {
  
      padding: 15px 0 25px 0;
      font-size: 15px;
      font-weight: 400;
      color: hsl(220, 15%, 55%);
  }
  

  If you have any questions or need further clarification, feel free to reach out to me.

  Happy Coding! 🍂🦃

  0

  ---

  

  Jeffrey Hill•100

  @webdevhillPosted about 2 years ago

  @vcarames It was overly complicated due to the fact that I built it at 1440px instead of mobile First! Then on my 24" monitor thing were breaking @1600px.

  I saw some very simple solutions that were built at 375px and were the perfect size in the 1440 screenshot. There were not actually responsive below 375 but were effective at satisfying the parameters of the style guide and provided screenshots.

  Thank you for your time

  0

  

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  @webdevhill

  The reason it was breaking was because you were using viewheight and percentages for your components containers.

  They were most likely using width instead of max-width ( It is common mistake for this challenge)

  The code I provided was meant to show you that you can achieve the same results with less code. The less code the better. Less maintenance and a faster loading site.

  Marked as helpful

  0