product preview card

Community feedback

• 

  beth•110

  @beth1207Posted over 1 year ago

  oh wow, thanks alot.

  0
• 

  hitmorecode•6,860

  @hitmorecodePosted over 1 year ago

  Congratulations well done. There is a problem with your CSS the media query is not responding after taking a look at it, it seems there is a small mistake.

  You need to add a space between and and (). If you fix this your mobile version if fine

  @media only screen and(max-width:550px) {
  .card{
  margin-top: 1rem;
  margin-bottom: 1rem;
  }
  .image-container{
  width: 100%;
  height: 40%;
  }
  .image-container img{
  content: url("images/image-product-mobile.jpg");
  }
  .perfume{
  width: 100%;
  }
  .perfume .name{
  padding-right: 0;
  }
  .card{
  flex-direction: column;
  }
  .image-container img{
  border-bottom-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 0px;
  }
  }
  

  In the CSS you also have the font-family in multiple places. You don't have to do that, just add the font-family on the body and it will apply to the entire page.

  body{
  font-family: Montserrat, Fraunces;
  background-color:  var(--cream);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  }
  
  .perfume .description{
  font-family: montserrat; /* remove this line */
  font-size: 14px;
  color: var(--dark-grayish-blue);
  line-height: 22px;
  margin-bottom: 1.75rem;
  }
  
  .title{
  font-family: montserrat; /* remove this line */
  letter-spacing: 3px;
  font-size: 14px;
  color: var(--dark-grayish-blue);
  margin-bottom: 1.7rem;
  }
  
  .price-tags .old-price{
  font-family: montserrat; /* remove this line */
  color: var(--dark-grayish-blue);
  }
  
  

  0