Submitted about 2 months ago

Product Card Solution

Hoaxilog• 130

@Hoaxilog

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Product preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

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

Coming up with an idea on how to solve my problem while doing this challenge.

What challenges did you encounter, and how did you overcome them?

My problem that encounter is about the image, I started at 375px (mobile device) i set my card (parent element) to padding 1.5rem and i have a child; first is the image, I set position: absolute to stick at the very top and for another child which is the text below the image I set the margin-top to have some space and so I can see the text. Now there's a problem when I do this;

The space above the text is so huge when trying to zoom in at 375px.
Trying to remove the padding for my div > img but staying the padding for the text below

SOLUTION

instead of relying on same div parent with same padding I make a different parent with the same padding for them. But removing the padding for my image using media queries since it only need to stick at the very top when u are on max-width 375px devices.

REALIZATION

while doing this challenge I thought my path is gonna be easy like there is no problem that I can solve but this problem that i encounter humble me.

Community feedback

Daniel 🛸• 44,230

@danielmrz-dev

Posted about 2 months ago

Hey there! 🙋🏽‍♂️

Congrats on finishing the challenge! ✅

Your project looks awesome!

Here's a tip that might interest you:

📌 When you have different versions of the same image, consider using the <picture> tag.

This will help ensure the correct image loads on the user's device, saving bandwidth and boosting performance.

Example:

<picture>
    <source media="(min-width: 768px)" srcset="{desktop image path here}">
    <img src="{mobile image path here}" alt="{alternative text here}">
</picture>

Hope you find this useful!

Great job overall!

Marked as helpful

Hoaxilog• 130

@Hoaxilog

Posted about 2 months ago

@danielmrz-dev oh that's a very useful thankyou for feedback. That is much better than setting my image to display none and use a media queries to show it.

Michael King• 90

@mking0823

Posted about 2 months ago

Look into the picture tag I used it and it made 100% easier to switch between tags. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture

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