Challenge#4-Perfume

Community feedback

• 

  Victória Nogueira Marques•390

  @victoriamnxPosted over 1 year ago

  Hi Luis, I saw your code and would like to give you some tips:

  You use preconnect to import fonts, there is a better way to do this:

  In your style.css file put @import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,[email protected],700&family=Montserrat:wght@500;700&display=swap");

  @import will get the url that google fonts generates to use in the code.

  In your button the photo of the cart is misaligned, you can change your code to:

  <button><img id="cart" src="images/icon-cart.svg" alt="" />Add to Cart</button>

  That way the image will be correct and aligned with the button, and the fonts will be imported faster, I hope these tips help you, the result was great!

  Marked as helpful

  0
• 

  valeOopa•280

  @valeOopaPosted over 1 year ago

  Congratulations on completing the challenge, that's great!

  As for the photo you could do this:

  Add to .perfume object-fit: cover; height: 100%; width: 100%;

  and add in @media .perfume: max-height:300px;

  Object-Fit serves as a property to adjust your image depending on the value you pass to it. Also, we use a max-height 300px to limit the height of the image, and finally, we say that it fills 100% of the container, so that it is displayed correctly.

  Happy Coding!

  0