@elaineleung
Posted
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