flex technique html/css

Community feedback

• 

  Mahmood•1,510

  @MahmoodHashemPosted 5 months ago

  Hello there

  Congratulations on completing the challenge!

  Your solution is truly impressive.

  I have a couple of ideas to make it even stronger:

  • Firstly, consider centering the card. You can achieve this by applying the following CSS to the body (excluding margins from the card for correct functionality):

  body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  

  • Secondly, there is no need to wrap the card inside three containers. One container is sufficient to make your code maintainable and readable. For this single card container, set the max-width, border, background, etc. This will eliminate the need for media queries.

  After refactoring:

  HTML

  <div class="card">
    <img src="./images/illustration-article.svg" alt="illustration" class="first-image" />
   
  ... ... 
  </div>
  

  CSS

  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }
  
  .card {
    border: 1px solid #000;
    padding: 20px 20px;
    background: #fff !important;
    max-width: 400px;
    ...
  }
  

  Hope this helps! IF DOES HIT THAT LIKE

  Keep up the great work!

  Marked as helpful

  1

  ---

  

  Abioye965•80

  @Abioye965Posted 5 months ago

  @MahmoodHashem thanks a lot boss i will try this out now

  1

  

  Abioye965•80

  @Abioye965Posted 5 months ago

  @MahmoodHashem yoo i just implemented your style. it worked so well

  1

  

  Mahmood•1,510

  @MahmoodHashemPosted 5 months ago

  @Abioye965 You've done really well, proud of you for embracing a growth mindset.

  0
• 

  LucasJCFreire•260

  @LucasJCFreirePosted 5 months ago

  Your design was great. Vibrant colors better than the original. :)

  Marked as helpful

  1