Card component using sass flexbox

Community feedback

• 

  Luka Glonti•3,440

  @lack21Posted over 1 year 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.

  Marked as helpful

  3

  ---

  

  Matias Ludueña•1,990

  @matiasluduena23Posted over 1 year ago

  @lack21 Thank you Lucas! That was the problem.

  And I also changed the height of the body to min-height so the element can grow if is necessary.

  1
• 

  P

  BigDaddyFlo•570

  @FloRiouffreytPosted over 1 year 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

  Marked as helpful

  2

  ---

  

  Matias Ludueña•1,990

  @matiasluduena23Posted over 1 year ago

  Hi @FloRiouffreyt thank for the help and resources. Fron now on I'm gonna to play attention to the headings. Thanks

  1
• 

  Ángel Pérez Rosales•100

  @TitodeluxPosted over 1 year 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.

  2