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

Preview Card Main with CSS

jkaps9 140

@jkaps9

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


What are you most proud of, and what would you do differently next time?

simplified my code

What challenges did you encounter, and how did you overcome them?

hard to get the image to match the border radius, but i figured it out.

What specific areas of your project would you like help with?

there has to be a better way to get my content to line up, but for now i used align-self to manually align them.

Community feedback

OL 40

@OlamideLanre

Posted

*the image should be in the container div instead of a span, so when you display flex it automatically placed side by side with your product-details *use line-height css property to reduce the spacing between the bold text

  • next time do not give your main container a height so your items can grow or shrink with its size. In your solution the image is bigger than the div, making it seem like it's outside
1

jkaps9 140

@jkaps9

Posted

@OlamideLanre I really appreciate your feedback. I did update the code after I submitted to remove the height in the main tag and make some other adjustments. I had added the span because without it the image didn't size correctly on Firefox. To be fair I do see now that it's a bit bigger but it's way better than before where on Firefox the image was super small in the desktop layout. Any advice on how to get the image to match with the rest of the content? Just removing the span tag isn't doing it for me.

0
OL 40

@OlamideLanre

Posted

@jkaps9 I just viewed the site, it's looking pretty good on chrome but I'd say reduce the size of the image, just give it a width but the value should be in percentage. Also you could either increase the max width of you container a little and give the bold text a width property with ch relative unit value till the texts looks like the same as the one in the design.

0
jkaps9 140

@jkaps9

Posted

@OlamideLanre I'll give it a shot later 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