Design comparison
Solution retrospective
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
- @OlamideLanrePosted 3 months ago
*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@jkaps9Posted 3 months ago@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@OlamideLanrePosted 3 months ago@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
Please log in to post a comment
Log in with GitHubJoin 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