Card component using sass flexbox

Community feedback

• 

  Luka Glonti•3,440

  @lack21

  Posted about 2 years ago

  Good work 👍, but I have some recommendations!

  • The problem with image is that height: 100% in the .cart-img is not working in this case because the parent's height is not defined! Set height: 450px to the .card and set background-size: cover to the .card-img, this should make it work!
  • Also replace height: 100vh to min-height: 100vh in the body, the difference is that, when you set height: 100vh to something, that means it won't be bigger than that, it might cause some problems in the future, so better approach is to set min-height: 100vh, like this in case content is overflowing container will adjust to it.

  31

  Marked as helpful
• 

  BigDaddyFlo•570

  @FloRiouffreyt

  Posted about 2 years ago

  Hi @matiasluduena23, just remove the first "/" in front of the URL. This one gets you back to the root of your github folder, and that is not what you want. You want to stay in the folder containing the index.html file, so simply write "url("images/image-product-desktop.jpg")", I believe that should do it. https://www.w3schools.com/html/html_filepaths.asp Also try to pay attention in HTML to the order of your headings (h1, h2 ...). It is not good practice to have any other "hX" before the "h1" (in your case, "Perfume" is h4, and "Gabrielle eau de parfum" is h1). Hope this helps! EDIT: @Titodelux is right, you actually need to go back one folder, so "../images/[...]", my bad

  21

  Marked as helpful
• 

  Ángel Pérez Rosales•100

  @Titodelux

  Posted about 2 years ago

  Hi! The address that you are using to reference the image is wrong, since since you are inside the SCSS folder you will have to go back first to be able to enter the Images folder, I edited the url from your deploy and it worked.

  20