mofada• 310
@mofada
Posted
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 helpful
1
