Submitted over 2 years ago

Product preview card for desktop and mobile

MURRAY122•280

@MURRAY122

Preview site View code

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

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

I did have an img tag within the HTML page, but I removed it due to not being able to change the src of the image as the media screen changed from mobile to desktop. I do wonder however if it would be possible to have changed this without the need for JavaScript and strictly CSS.

I also used CSS variables but had to resort to manually inputting the hsl for the button hover. I did attempt to use hsla with the variable within in it and then just change the alpha but didn't have the desired effect. I wondered if I missed something or if there is a better approach to darkening the background without effecting the text color of the button.

Edit - Updated CSS Layout

Community feedback

Marcell Mihály•750
@mihalymarcell86Posted over 2 years ago
Hi @MURRAY122,

I think, the most elegant solution for responsive images is using the <picture> element. Check out this guide on MDN about responsive images, it goes into detail about all the use cases.

I think, your solution of the hover effect is perfectly fine. The alpha channel is responsible for transparency, so adjusting that would only make the background behind the button more visible. However, you might be interested in CSS filter functions for applying all kinds of cool effects.

Hope you will find these useful. Keep up the good work!
1
MURRAY122•280
@MURRAY122Posted over 2 years ago
@mihalymarcell86 I took your advice on using picture. It worked well. Ideally would be good to have had the button text stay true white while using the filter function but still a nice result. Thanks for taking the time to give feedback.
0
Marcell Mihály•750
@mihalymarcell86Posted over 2 years ago
@MURRAY122 I'm glad I could help.
0
nerometa•280
@nerometaPosted over 2 years ago
You're doing great so far! Here's one of the solution I use for your image issue:

You make 2 <img> tags with different images together, maybe assign a class to work with CSS later. Suppose you got one <img> with mobile image and another <img> for desktop image. Then, for it to change, you put all of that <img> into @media queries and set property display: none when you want to hide it and set display: block for an image you want to show.

Suppose you got your images and you decided that 720px will be your breakpoint. Set that @media query to (max-width: 720px), which means anything that's below 720px will show up (smaller devices). You might put your desktop image to display: none and mobile image to display: block.

You don't have to do another @media (min-width: 720px) for desktop since ANYTHING that's not in media query works similar to that. So, out of @media query, you set your desktop image to display: block and then your mobile image to display: none

Other than that, great job! Keep coding✌⌨
0
MURRAY122•280
@MURRAY122Posted over 2 years ago
@nerometa Thanks for your feedback, my mind completely blanked on using display: block and none while working on it. I adopted a different approach but thank you for the reminder and taking the time to give me feedback
0

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