Submitted 4 months ago

Product Page Card w/ Tailwind CSS

Vanessa•150

@petrihcour

Preview site View code

This is a solution for...Product preview card component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

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.

What specific areas of your project would you like help with?

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

mofada•340

@mofadaPosted 4 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 helpful

Please log in to post a comment

Join 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