Product Preview Page

Community feedback

• 

  M•940

  @Dev-MV6Posted 7 months ago

  Hi there 👋, importing the fonts using the link tag in your HTML is not enough to apply the font family to your page. You need to set the CSS font-family property to the element you want apply the font to in your style-sheet:

  h1 {
    font-family: Fraunces, serif;
  }
  

  Hope you find this helpful 👍

  Marked as helpful

  0

  ---

  

  Covenant-0•100

  @Covenant-0Posted 7 months ago

  @Dev-MV6 Thank you very much for this. I've been stuck on this for a while.

  0
• 

  Grego•1,310

  @Grego14Posted 7 months ago

  👋 Hello! 🎉 congratulations on completing the challenge! 🎉

  I recommend that you add the min-height: 100vh property to the body element so that it is centered correctly, but for that to work you must remove the margin-top: 128.75px that you added to the .container element.

  I recommend using min-height instead of height in the .container element as it is causing overflows, the min-height property will make sure that the element has a minimum height but that it also can grow.

  It is not necessary to add two source elements inside the picture element.

  <picture>
    <source media="(max-width: 799px)" srcset="image-product-mobile.jpg">
    <img src="image-product-desktop.jpg" class="image" alt="image of product">
  </picture>
  

  Since the image that is in the src of the img element will always be displayed until the screen width is 799px.

  Try adding a more descriptive alt attribute.

  To make the image take up the entire width of its parent, use min-height: 100%

  Try adding more descriptive classes something like this: image-container or product-info and not container1 container-2

  I don't see the Google fonts since my blocker prevents them from downloading, but in another comment I saw that someone already told you how to solve it.

  I hope this helps! 😁

  0