Skip to content
Submitted about 1 month ago

Product-preview-card using tailwindcss and flexbox

Rafael Ibarra•120
@rafbar2000rr
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

What are you most proud of, and what would you do differently next time?

I am proud of starting to understand responsive design, next time I will try to understand more and more each step during the coding process.

What challenges did you encounter, and how did you overcome them?

When I resized the window to check the change in the layout from mobile to desktop, I saw no changes. Then, I realized that it was not necessary to write exactly 375px in the tailwind.config.js file. I could simply write a greater number, so finally it worked.

What specific areas of your project would you like help with?

I would like to know if there is another way in Vercel to select the folders, because I use to move the images from the images folder to the src folder, otherwise Vercel cannot read the images. I don't know if what I do is really necessary or there is a better way to do it.

Community feedback

  • Huy Phan•2,380
    @huyphan2210Posted about 1 month ago

    Hi, @rafbar2000rr I took a look at your solution and I have some thoughts:

    • Regarding your question about Vercel, I don’t think the issue is that Vercel can’t read the images from the images folder. It’s more likely that the src path in your img tag was incorrect. Try placing the images back into the images folder and update the src attribute. For example, instead of src="./image-product-mobile.jpg", use src="./images/image-product-mobile.jpg".
    • If that doesn’t resolve the issue, another option is to create a public folder at the same level as your src folder. Move your images folder into public, and you should then be able to reference the images without including public in the path. For example, change the src to src="images/image-product-mobile.jpg". Vercel (and many other hosting platforms) recognizes the public folder automatically.
    • Also, which IDE are you using? A good IDE should help by suggesting the correct URI when you’re writing the src attribute, which can prevent mistakes like this.

    Let me know if you have any questions. Hope this helps!

    Marked as helpful
    1

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