Neon Pink responsive stat preview card

Community feedback

• 

  Chevalier Antoine•670

  @SeyBooPosted over 2 years ago

  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);
  }
  

  1
• 

  IRVINE MESA•1,855

  @DrMESAZIMPosted over 2 years ago

  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);} }

  1