Product Card Component Using HTML & CSS

Hi David, well done completing your second challenge!

I just want to follow on what @correlucas said about images; you'll want to use the <picture> element for switching between images whenever you're using an image and not background image. You'll only need to add that into your HTML and not do much for CSS aside from adding object-fit if needed; you don't even necessarily need to write a media query in the CSS either unless the styles related to the image change (like the container). Even though the method that @BartoszZ26 suggested is doable, there's just more CSS and HTML that you need to deal with than necessary.

Here's what it looks like, where <img> contains the image you start with and <source> is the one that you want changed at a certain breakpoint.

<picture>
    <source media="(min-width: 960px)" srcset="image-desktop.png" />
    <img src="image-mobile.png" alt="perfume bottle" />
</picture>

I used it in my solution for this challenge, so you can have a look: https://www.frontendmentor.io/solutions/card-component-using-cube-css-tNaBY0y_Nx

👾 Hello David, congratulations for your solution!

Answering your question:

1.There's two ways to display images in base of the device/screen size. You can use media query or the tag <picture> to determine when the image should switch.

Guide for picture:

https://www.w3schools.com/tags/tag_picture.asp

Guide for media query:

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

2.For the button there's no need to use <button> you can use <a> the button is often used to send some form info, about the svg, is better you import it directly into the tag, for example <button><img><p></button> this way you can avoid the marker (the bullet marker is the default marker for lists) you can remove it using ul, li {list-style: none}.

Hope it helps, happy coding!

One way to switch images depending on screen size is by adding both images to your HTML and utilizing the display: none; property. Basically, you set the image that should be invisible to display: none; while setting the one that should be visible to display: block, flex etc.;. In your case it'll look similar to this:

desktop-image-element {
display: none;
}
@media (min-width: 800px) {
mobile-image-element {
display: none;
}
desktop-image-element {
display: block;
}
...
}