Skip to content
Submitted 9 months ago

Product-preview-card using tailwindcss and flexbox

tailwind-css
Rafael Ibarra•120
@rafbar2000rr
A solution to the Product preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

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.

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Huy Phan•3,430
    @huyphan2210

    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

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