Responsive Product preview card using Flex and Media Queries

Community feedback

• 

  hitmorecode•7,540

  @hitmorecode

  Posted 7 months ago

  Congratulations well done. I took a quick look at your CSS and I have a few suggestions.

  • When you have elements with classes or id's and whenever you want to target that element, you can just target that specific class or id.

  // here you want to target the element with the class price. You went three layers deep to target `.price`.
  .card-content .price-container .price {
      font-size: 32px;
      font-family: 'Fraunces', serif;
      font-weight: 700;
      color: var(--dark-cyan);
  }
  
  // you can do it like this instead.
  .price {
      font-size: 32px;
      font-family: 'Fraunces', serif;
      font-weight: 700;
      color: var(--dark-cyan);
  }
  

  • DRY avoid repeating the same thing over and over. You have the "Montserrat" font on four different elements and you have repeated this four times. You can combine all four in one CSS rule.

  .card-content .category {
      font-size: 12px;
      color: var(--dark-grayish-blue);
      letter-spacing: 5px;
      text-transform: uppercase;
      font-family: 'Montserrat', sans-serif;
  }
  
  .card-content p {
      font-size: 14px;
      font-family: 'Montserrat', sans-serif;
      line-height: 23px;
      color: var(--dark-grayish-blue);
  }
  
  .card-content .price-container .discounted-price {
      font-size: 14px;
      font-family: 'Montserrat', sans-serif;
      color: var(--dark-grayish-blue);
      text-decoration: line-through;
  }
  
  .card-content button {
      background-color: var(--dark-cyan);
      color: white;
      border: none;
      padding: 15px 0;
      border-radius: 10px;
      font-weight: 500;
      font-family: 'Montserrat', sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;
  }
  

  • Combine all these four into one.

  .category,
   p,
  .discounted-price,
  button {
      font-family: 'Montserrat', sans-serif;
  }
  

  With this if you ever need to change the font-family on all four, you just need to do it in one place.

  • When you add fallback fonts, it's best to do it on the body. In this case the sans-serif should be on the body.

  I hope you find this helpful. Keep it up 👌👍

  01

  Marked as helpful
• 

  P

  Lo-Deck•3,740

  @Lo-Deck

  Posted 7 months ago

  Hi your link viewCode is useless error 404.

  01