Neon Pink responsive stat preview card

Hi Monkey Man,

Quick note but 250 px is very small and no modern phone will every have such a small screen so don't worry about it.

For the background image, you can add a color to it this way, background: rgb(126, 85, 85, .5) url(http://placekitten.com/320/160); You just need to slow down the opacity of the color

And to change the picture based on the size you have two way

• Using img tag :

// HTML

<img src="#" alt="#" class="desktop" />
<img src="#" alt="#" class="mobile" />

// CSS 

.desktop {
display:none;
}

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

• Background Image

//CSS
background: rgb(126, 85, 85, .5) url(http://placekitten.com/320/160);

@media (min-width:1024px)
{
background: rgb(126, 85, 85, .5) url(url for dekstop);
}

Hi Simon

I did YouTube video on this challenge here is the link

https://www.youtube.com/watch?v=io2zNFSxk7o

Hopefully It will give you some guidance on use of media queries

in you challenge to change images for different sixes i would add this code inside file style.css on line 40

img {background-image: url(images/image-header-mobile.jpg);}

@media(min-width: 600px){ .img {background-image: url(images/image-header-desktop.jpg);} }