CSS Display Flex

Community feedback

• 

  Dicskson Owusu Nyantakyi•270

  @ondicksonPosted about 2 years ago

  Hi @ErriGarcia 👋, good job for completing this challenge and welcome to the Frontend Mentor Community! 🎉

  1. You can add to background-size: contain;

  .order-summary-background {
      height: 100vh;
      background-image: url(./images/pattern-background-mobile.svg);
      background-repeat: no-repeat;
      background-color: hsl(225, 100%, 94%);
      background-size: contain;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  

  2. In order to make you <div class="order-summary-background-plan"> look like the figma design. Add a new div to handle only order-summary-music-icon and order-summary-description. Something like this

  <div class="order-summary-background-plan">
  
  <div class="newdiv">
            <img class="order-summary-music-icon" src="images/icon-music.svg">
            <div class="order-summary-description">
                <h2 class="order-summary-h2-plan bold-text">Annual Plan</h2>
                <p class="order-summary-price-plan desaturated-blue-color">$59.99/year</p>
            </div>
  </div>
  
            <a class="order-summary-change-link bold-text">Change</a>
          </div>
  

  Then in your CSS you can add Justify-content: space-evenly;. Something like this

  .order-summary-background-plan {
      background-color: hsl(225, 100%, 98%);
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      margin-top: 24px;
      padding: 16px;
      border-radius: 12px;
  }
  

  0
• 

  Abhijit Shankhdhar•320

  @im-abhijitPosted about 2 years ago

  hi @ErriGarcia, congratulations on completing this challenge , you have done a good job

  please do use min-height for your container element else your content will get cropped

  test your code on height 400px you will see your image is getting cropped

  you can check my solution to get an idea

  https://www.frontendmentor.io/solutions/stats-preview-card-component-solution-with-mobile-first-methodology-S9nVoXkiRg

  0