DIFFERENT HEADER IMAGE FOR SMARTPHONE VERSION

• 

  oaklands2017 · Member · Oct 5, 2016 at 6:09 am

  • Copy link
  • Add topic to favorites

  Hello,

  Is is possible to maintain my header image for computer and tablet but choose a different one just for the mobile phone version?

  I recently changed the header image reducing the height of it and it looks much better on a computer and a tablet. But I still feel that the old one was better on the mobile version.

  Thanks in advance

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

• 

  innisfreehomestead · Member · Oct 5, 2016 at 4:08 pm

  • Copy link

  Hey there!

  Are you referring to the tree in the header or the main homepage content header image?

  Thanks,
  Sage

• 

  oaklands2017 · Member · Oct 5, 2016 at 8:49 pm

  • Copy link

  The main header image that says “Oaklands School” and has the tree.

  Thanks,
  David

• 

  innisfreehomestead · Member · Oct 5, 2016 at 10:05 pm

  • Copy link

  Hi David,

  This code should do the trick, you can replace the background image url with the url for your mobile image:

  @media screen and (max-width: 768px) {
  #site-header {
  	background-image: url(https://oaklandsschool.files.wordpress.com/2016/10/oaklands-140header2.jpg);
  	height: 140px;
  }
  #site-header img {
  	display: none !important;
  }
  }

  Let me know if that doesn’t work,
  Sage

• 

  oaklands2017 · Member · Oct 6, 2016 at 6:32 am

  • Copy link

  Ok. I was able to change the image for smaller devices but it didn’t adjust to the width of the device. It was showing only the top left part of the image. “oaklan”: thats all I could see on the phone version.

  Thanks

• 

  innisfreehomestead · Member · Oct 6, 2016 at 3:27 pm

  • Copy link

  Hey David,

  Would you mind sharing the image link with me so I could test further? Better yet would be if you wouldn’t mind placing the code back in so I could play with it directly.

  Thanks,
  Sage

• 

  oaklands2017 · Member · Oct 6, 2016 at 7:08 pm

  • Copy link

  Hi Sage,

  Of course, that’s the link:

  

  I’ve placed the code back and changed the image link to the one I would like.

  Thanks

• 

  innisfreehomestead · Member · Oct 6, 2016 at 7:32 pm

  • Copy link

  Thanks David,

  If you take out the previous code I gave you and place in this, it should work better:

  @media screen and (max-width: 768px) {
  #site-header {
  	background-image: url(https://oaklandsschool.files.wordpress.com/2015/08/oaklands-header-11.jpg);
  	height: 140px;
  	background-size: 100%;
  	background-repeat: no-repeat;
  	background-position: center center;
  }
  #site-header img {
  	display: none !important;
  }
  }

  Let me know if that doesn’t work,
  Sage

• 

  oaklands2017 · Member · Oct 6, 2016 at 9:28 pm

  • Copy link

  Yes and no. It works on certain devices, but as soon as you turn the device to vertical or change to horizontal it shows a white gap at the top and at the bottom.

  But don’t worry, I’m happy with how it is right now (sorry for being a pest)
  Thanks

• 

  innisfreehomestead · Member · Oct 6, 2016 at 9:32 pm

  • Copy link

  Not a pest at all!

  I’ll hold off looking into it further if you’re happy how it is, but if ever you want it changed you know where to find me :)

  Sage