Product Preview Card with many Flexboxes

Community feedback

• 

  Victoria Azola Silva•1,290

  @VickyAzolaPosted 6 months ago

  Hi there! 👋 Awesome job completing this challenge. 

  The media query seems fine to me. The only thing that seems different compared to the design is the price on mobile; there, the flex-direction: column; is not necessary: 

  @media screen and (max-width: 768px) {
  .....
    .price-block {
      gap: 0.5rem;
      margin: 1rem 0;   ---> added to separate from the text and button
    }
  }
  

  And for the button, you can achieve the alignment by giving it a display of flex and deleting the class on the image. Here is an example:

  button {
  ---- added -----
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: .8rem;
  -----
    width: 100%;
    padding: 1rem;
    font: inherit;
    font-weight: 600;
    color: var(--white);
    background-color: var(--dark-cyan);
    cursor: pointer;
    border: none;
    border-radius: 0.5rem;
  }
  
  --- Delete this one ----
  .icon-cart {
    width: 0.75rem;
    vertical-align: middle; /* Aligns strangely, not in the middle */
    margin-right: 0.5rem;
  }
  

  Hope this helps!

  0