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 component challenge using css and html

Poumā€¢ 40

@Poumdg

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 have difficulties with sizing the rows and columns in order to make things fit properly. Any suggestion to improve would be much appreciated, thank you!

Community feedback

Daniel šŸ›øā€¢ 44,230

@danielmrz-dev

Posted

Hello @Poumdg!

Your project looks great!

I have a suggestion about your code that might interest you:

šŸ“Œ You can use the <picture> tag when you have different versions of the same image šŸ–¼. Using the <picture> tag will help load the correct image to the user's device, saving bandwidth and improving performance.

Example:

<picture>
    <source media="(max-width: 460px)" srcset="{desktop image path here}">
    <img src="{mobile image path here}" alt="{alternative text here}">
</picture>

I hope this helps!

Other than that, excellent work!

Marked as helpful

1

Poumā€¢ 40

@Poumdg

Posted

Hello @danielmrz-dev ! Thank you for your suggestion, will definitely try implementing that on my next project!

1
KojoYeboahā€¢ 130

@KojoYeboah

Posted

where are you finding it difficult to size the shape

0

Poumā€¢ 40

@Poumdg

Posted

@KojoYeboah the image ratio is not looking good since I adjusted it manually and I initially had issue with keeping the column size consistent when zooming but figured it out after a little while

0
KojoYeboahā€¢ 130

@KojoYeboah

Posted

@Poumdg Alright bro, so are you done now?

0
Poumā€¢ 40

@Poumdg

Posted

@KojoYeboah Yeah bro, thank you for trying to help man!

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