@leoikeh99
Posted
A nice attempt, i have a couple of corrections:
-
You shouldn't set the card to a width of 50% rather to an actual value e.g. 600px
-
As for flexbox i think you used it well but the image and the right part (the content), should both take 50% of the card you can do this by easily setting the width of both the image and the right part (the content) to 50%
-
It will also be very helpful to set the content parts border-box to box-sizing i.e.
box-sizing:border-boxin your css
lastly i'll leave a resource link to a youtube step by step solution to this problem: Product Card Component (Explained) - Frontend Mentor #1
Marked as helpful
@CodeSofty
Posted
@leoikeh99 Thank you for the feedback. Quick question, what is the reasoning for the 600px rather than the 50% card width? I thought a percentage would help with responsiveness, but maybe that's not the case.
@leoikeh99
Posted
@CodeSofty with 50% the width of the component at large screen sizes could get stretched too wide which is not how the component was designed. So it makes sense to set a static width e.g. 600px for the component initially, then at smaller screen sizes you could change the width to something like 90% which will help with responsiveness.
Marked as helpful
