Product preview card component - using CSS Container Queries

Community feedback

• 

  Renato Lacerda•160

  @ralacerdaPosted about 2 years ago

  Great job on the challenge!

  You have to be careful when using github pages since your repo name is included in the address. This means your icon image is not found, because is looking for https://volakovakat.github.io/images/icon-cart.svg, but the image is at https://volakovakat.github.io/product-preview-card-component/images/icon-cart.svg.

  To fix this problem, you can add a dot at the start of the path, so it points to the path relative to the HTML file (that is https://volakovakat.github.io/product-preview-card-component/index.html).

  <img class="img-cart" src="./images/icon-cart.svg"/>
  

  Marked as helpful

  0

  ---

  

  P

  kationt•20

  @volakovakatPosted about 2 years ago

  @ralacerda Hi, thanks a lot for the feedback! Your advice helped me fix the code, and the image displays correctly now.

  1
• 

  Tokelo Maloi•120

  @TK-LS97Posted about 2 years ago

  Hey awesome work, it's really identical to the original design. Just center the whole thing like this :

  main {
   height:100vh.
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  

  Marked as helpful

  0

  ---

  

  P

  kationt•20

  @volakovakatPosted about 2 years ago

  @TK-LS97 Hi, thanks a lot for the feedback! I struggled with the center. I fixed it as you suggested, and now it looks perfect.

  2

  

  Tokelo Maloi•120

  @TK-LS97Posted about 2 years ago

  @volakovakat Glad I could help.

  0