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

Responsive page using flexbox

@abhishekdaga

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


Font did not work on the site. Additionally, letter-spacing also did not work. This is the beginning of my journey and it was very helpful to explore and search to get the solution. The solution is not perfect but I want to have some inputs from the community to move forward.

Community feedback

@manjeshrv592

Posted

About font family in your css body selector your using font-family property 2times. So the last property value is used by the browser. Just remove font-family: 'Fraunces', serif; in body tag and font will be fixed for body.

In your css file select all heading tags and set their font family to Fraunce, So it should look something like this h1,h2,h3,h4,h5,h6 {font-family: 'Fraunces', serif;}

Now browser will use 'Montserrat' for body and 'Fraunces' for titles.

For letter spacing select the tag and add css property 'letter-spacing'. Play with the values and see what works. 5px would work for this challenge.

I see image is not visible. You're using wrong path for the src and srcset attributes. According to your folder structure image path should be ./image-product-desktop.jpg or ./image-product-mobile.jpg

Happy coding 👍

Marked as helpful

0

@abhishekdaga

Posted

@manjeshrv53, Worked like charm! Thanks. I changed the image path immediately after upload when I uploaded the images directly instead of folder in git. I can see the images, but don't know if everyone can see them.

0

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