@VCarames
Posted
Congrats @dhatGuy for completing this challenge!
When dealing more than one image that need to show up depending on the screen size (desktop/table/mobile), you want to use the <picture> element. So your code for the images should look like this:
<picture>
<source media="(min-width: )" srcset="desktop image goes here">
<img src="mobile image goes here" alt="">
</picture>
Marked as helpful
@dhatGuy
Posted
@vcarames, thanks for the feedback. I tried it but couldn't understand how it works. I'll look into it again.
@VCarames
Posted
@dhatGuy
Essentially, you'll add the desktop image in the <source> element and add the min-width on the size of the screen when you want it to show.
For the <img> tag you'll add the image that you want to after the <source> image.
Heres a link with detail on it:
Marked as helpful
@dhatGuy
Posted
@vcarames, thank you. I have successfully implemented it.
@VCarames
Posted
@dhatGuy Looks good!
