Design comparison
Solution retrospective
I followed a mobile-first approach which made the desktop version much easier. I think it increased my efficiency and allowed me to focus more time on the details.
What challenges did you encounter, and how did you overcome them?I encountered an issue with the desktop version of the layout and the image and content within the container. I learned how to utilize flex-grow
and flex-1
for the content to grow and shrink.
I would appreciate ideas on how to make the layout look better on a medium desktop screen like "Nest Hub" in dev tools. It looks a bit wacky currently.
Community feedback
- @mofadaPosted 3 months ago
First of all, congratulations on completing this challenge. You did a great job
Perhaps consider opting for a fixed width, such as setting the width to 'w-[343px]' for mobile devices and 'md:w-[600px]' for screens wider than 768px.
<main class="m-auto flex flex-col w-[343px] h-[612px] bg-white rounded-xl md:flex-row md:w-[600px] md:h-[450px]"> ...
And then, the responsive picture can refer to this Responsive_images
<!-- Cover Image --> <picture class="md:grow md:basis-3/6"> <source media="(min-width: 768px)" srcset="images/image-product-desktop.jpg"/> <source media="(max-width: 768px)" srcset="images/image-product-mobile.jpg"/> <img src="images/image-product-mobile.jpg" alt="produce image" class="w-full rounded-t-xl md:rounded-l-xl md:rounded-r-none"/> </picture>
The 'uppercase' tag works just fine, and I had to search for it for a while
Marked as helpful1
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