Design comparison
Solution retrospective
Any suggestions and feedback will really helpful
Community feedback
- @gulamansari57181Posted about 2 years ago
Ya also take care of the typography. Main heading in the design is rendering in three lines whereas in your design it is rendering in two line only. Tip : Make sure to use responsive font-size as per the viewport. So you can use (e.g. rem ,em) for typography. Note: use rem : for font-size and use em: for margin and padding for better control and code readability.
π Happy Coding !!!π
Marked as helpful1 - @correlucasPosted about 2 years ago
πΎHello Nico, congratulations for your new solution!
To have more control over the product images you use
<picture>
to wrap both desktop and mobile images together in the same tag, and render each image depending of the device (phone / computer) by the settings for the width you'll insert in the htmlHere;s a guide for this tag if you don't know it yet:
https://www.w3schools.com/tags/tag_picture.asp
For the column with the text content you can use
justify-content: space-around;
to use a uniform spacing between elements, or you usepadding-bottom
/gap
to create these gaps.π I hope this helps you and happy coding!
Marked as helpful1@N1CoderPosted about 2 years ago@correlucas Thank you for your feedback, I learned something new about picture tag π
1
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