
Design comparison
Community feedback
- P@sztedinaPosted about 2 months ago
Hey, well done finishing this challenge.
Here are some tips to take along with you on your developer journey - I hope you find them helpful!
HTML: Well structured. CSS:
Make a habit of including a proper CSS Reset at the top of the stylesheet.
On body, you can set a default font size value. Try to use clamp() so that the font size changes with screen sizes
Remove the styles on main, it doesn't need any. You can rearrange the styles of the divs to make it simpler.
On mobile size it isn't necessary to use flex/ flex-direction: column.
On the image, use display: block, and max-inline-size 100% or 50% (depending on the screen size) It prevents it from overflowing its container. Without this, an image would overflow if its intrinsic size is wider than the container. max-width: 100% makes the image shrink to fit inside its container.
When you use @media try flex: 1 on product image and on product content. Equal width is important in this case.
Marked as helpful0
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