Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Card component using sass flexbox

@matiasluduena23

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


My image on the Github page is not showing. Can someone check the reason? Thank you

Community feedback

Luka Glonti 3,440

@lack21

Posted

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

@matiasluduena23

Posted

@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

@FloRiouffreyt

Posted

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

@matiasluduena23

Posted

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

1

@Titodelux

Posted

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

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord