Order Summary component using CSS Grid and Flexbox

Community feedback

• 

  Ciceron•940

  @MarcusTuliusCiceronPosted over 2 years ago

  Hi congrats on this challenge,

  There is always multiple ways to layout element, one way is not better than another, just use what your comfortable with in a first place. Then if you're facing perfomances issue you can try to go for efficient solution.

  Here is how I did when I did that challenge: HTML:

  <div class="card__item">
        <div class="card__item__image">
  
        </div>
        <div class="card__item__text">
          <p class="card__item__name">
            Annual Plan
          </p>
          <p class="card__item__price">
            $59.99/year
          </p>
        </div>
  

  CSS

  .card__item{
          background-color: $veryPaleBlue;
          border-radius: 10px;
          padding: 24px;
          display: flex;
          align-items: center;
          margin-bottom: 30px;
          &__image{
              background-image: url(icon-music.svg);
              width: 48px;
              height: 48px;
              margin-right: 20px;
          }
          &__name{
              color: $darkBlue;
              font-weight: 600;
              margin-bottom: 8px;
          }
          &__text{
              margin-right: 90px;
          }
  }
  

  I used margin and media querry to make sur it stays in good shape when window size change.

  Hope this will help

  Happy coding :D

  0

  ---

  

  Edvinas•230

  @ebukanasPosted over 2 years ago

  @MarcusTuliusCiceron Thanks for the feedback, Marcus! Appreciate it :)

  1