Skip to content
Submitted about 2 years ago

Perfume Product Preview (Chanel)

Tyrone Robertson•230
@Roneeey
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Help!

  1. The size of the image section decreases in width and the content section increases in width when viewing in Firefox. I have been unable to research why. Any ideas?
  2. I think it has to do with the way my .card was styled as the white background also shrinks without the text shrinking as well when making my chrome window smaller.
  3. Perfume bottle image not displaying on my Github pages site. Any ideas?

Community feedback

  • Lucas 👾•104,340
    @correlucasPosted about 2 years ago

    👾Hello @Roneeey, Congratulations on completing this challenge!

    Great code and great solution! I’ve few suggestions for you that you can consider adding to your code:

    Your preview site its not displaying yet, first of all you need to configure the Github Page and update your solution inserting the new link.

    My suggestion for your is to use vercel or netlify since Github Pages its kinda tricky to configure. But if you really want to use Github Pages you can try to follow this guide to use it and fix the settings for your page https://docs.github.com/en/pages/quickstart.

    In case you choose netlify.com or vercel.com, in a matter of 5 minutes your preview site is online. All you need to do is to connect the Github account, import the repository and deploy it. Fixing that you've to update the solution with the new link and we'll be able to see your live site and help you.

    ✌️ I hope this helps you and happy coding!

    0

Please log in to post a comment

Log in with GitHub

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