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 Review Card

@ChamodJ

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 want to know how to align image and text inside the button. I tried few things but it didn't work.

Community feedback

IRVINE MESA 1,855

@DrMESAZIM

Posted

Hi

I read your feedback request I do know that by simply ,making use of div that will wrap all the contents you want to align will be helpful

If you find my suggestions difficult to implement . You can join us for our weekly live streams where we assists other developers by providing helpful reviews and feedback with live Frontend mentor code edits and reviews on this link. Your solution will also be reviewed and edited by myself link here >> https://youtube.com/live/L6WTd7HRTMM?feature=share

Marked as helpful

0

@AbhinavReddy-Dev

Posted

You can use grid for the image and content layout, and for the info inside the content section flex box with column direction and space-between should be good. Let me know if that worked for you.

Also your image has border-radius applied to the top right in desktop and none for the bottom left, you can switch them using media for different screen widths and apply necessary border radius.

Some changes in font size for line-through amount and reduced spacing between the values.

On large screens, the size of the card is stretched out, you can avoid this by using max-height for the card container.

Everything else looks great!

Marked as helpful

0

@ChamodJ

Posted

@AbhinavReddy-Dev Thank you.

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