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

@TanishValesha

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


This is not a Responsive Component, as I have not covered the Responsive chapter of CSS

Any kind of help is welcomed Thanks for viewing it.

Community feedback

@Adel-Al-Qosi

Posted

for the info section it needs a little bit of padding bottom. also you can center the prices (if you used display of flex you can do that by giving it an align-items of center) if you need more help in making it responsive let me know

Marked as helpful

0

@TanishValesha

Posted

@Adel-Al-Qosi Thanks for your comment I tried to align the prices properly using margins and stuff but wasn't working and I have not used flex for the content section, so is there any way I can align it perfectly vertically

Also, I haven't looked into the responsive chapter but if there is need I will surely contact you

0

@Adel-Al-Qosi

Posted

@TanishValesha I was talking about the prices. it seems you used inline-block. give both prices a div container, then use on it display of flex then apply what I said in the first comment. Happy coding

0

@TanishValesha

Posted

@Adel-Al-Qosi It worked. Thanks for the suggestion

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