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

Product Preview Card Solution with Tailwind (Feedback is Appreciated)

Nipaaaa1 350

@Nipaaaa1

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


I really appreciated if you could help me fixed the issue with images at certain breakpoints. Any suggestions?

Community feedback

Daniel 🛸 44,230

@danielmrz-dev

Posted

Hello @Nipaaaa1!

Your project looks great!

I have one suggestion for you:

  • Using the tag picture is one of the ways to work with images. But you can also use background properties.

Example:

In this project, you have two sections. One for the image and one for the text. Instead of using picture, you could've created a empty div and put the image using CSS properties background. By doing that, you could've set the position of the image as cover. So it would occupy all the available space of the container, no matter the size.

It all depends on the project specifications, but I always use either of those options, and when one of them does not work, the other usually does.

I hope it helps!

Other than that, great job!

Marked as helpful

0

Nipaaaa1 350

@Nipaaaa1

Posted

@danielmrz-dev Ah, I see. I didn't think about using background. Thanks a lot!

1

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