Changing the image only on mobile version

• 

  stagingyoucanafford · Member · Apr 16, 2015 at 10:21 pm

  • Copy link
  • Add topic to favorites

  Hi Forum!

  I am trying to just change the image on the home page, underneath the animated video.

  I know I have the right css because I can make it disappear on the mobile version but I cannot change the IMAGE!

  I want to be able to take this image: https://stageshowsold.files.wordpress.com/2015/04/ipad-version.jpg
  and be able to use that image only when the media screen is viewed on a phone.

  Thank you again for your help!

  P.S. here is my css already:

  @media screen and (max-width: 600px) {
  section#testimonials {
  visibility: hidden;
  clear: both;
  float: left;
  margin: 10px auto 5px 20px;
  width: 28%;
  display: none;
  }
  }

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Apr 17, 2015 at 3:10 pm

  • Copy link

  @ginablakestaging, give the following a try, but make sure and start with your browser window wide and then narrow it down. At 600px, the new image comes in and it is narrower than the available space (remove my width setting of 93% to see what I mean). I made some adjustments to your CSS. See what you think.

  @media screen and (max-width: 600px){
  	section#testimonials{
  		clear:both;
  		float:left;
  		margin:10px 20px 5px 20px;
  		background-image: url('https://stageshowsold.files.wordpress.com/2015/04/ipad-version.jpg') !important;
  		width: 93%;
  	}
  }