Mobile header

• 

  joaniepop · Member · Nov 23, 2016 at 1:43 am

  • Copy link
  • Add topic to favorites

  “I need some help editing the custom CSS for my site. I would like to use media queries to display a different custom header image on mobile devices. I am using the Snaps theme.”

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

• 

  fmixell · Member · Nov 23, 2016 at 4:55 am

  • Copy link

  Hey Joaniepop,

  This shouldn’t be too tough, here’s an article on how to work with @media queries within the context of WordPress.com CSS.

  https://en.support.wordpress.com/custom-design/custom-css-media-queries/

  If you have the chrome browser right click on the page and select inspect. From here you’ll be able to find out exactly what to target on your header.

  I could tell you but your site is private so I wasn’t able to get a closer look.

  If you need any further help just let me know!

  Freddie Mixell

• 

  joaniepop · Member · Nov 23, 2016 at 5:41 am

  • Copy link

  Thanks for your response! I tried those examples into my CSS but none of them worked. I took my site off private, if you could look at it, I would be insanely grateful!!

• 

  kevmarsden · Member · Nov 24, 2016 at 12:17 am

  • Copy link

  Hi @joaniepop,

  Most modern websites will automatically resize and crop images based on the size of the screen/browser. You can override those changes with custom CSS.

  To start, try using this custom CSS:

  @media screen and (max-width: 1000px) {
  		#masthead {
      background-image: url("https://joaniepop.files.wordpress.com/2016/11/cropped-dsc_08461.jpg")!important;
  	}}
  
  @media screen and (max-width: 800px) {
   #masthead {
      background-image: url("https://joaniepop.files.wordpress.com/2016/11/cropped-dsc_08461.jpg")!important;
  	}}
  
  @media screen and (max-width: 600px) {
  	#masthead {
      background-image: url("https://joaniepop.files.wordpress.com/2016/11/cropped-dsc_08461.jpg")!important;
  	}}
  
  @media screen and (max-width: 360px) {
  		#masthead {
      background-image: url("https://joaniepop.files.wordpress.com/2016/11/cropped-dsc_08461.jpg")!important;
  	}}

  Each of those four rules change the header image at different screen/browser widths. You’ll need to replace the URL/link for each of the four rules.

  If you have any other questions, please let us know.

• 

  joaniepop · Member · Nov 24, 2016 at 2:10 am

  • Copy link

  I put those rules into my Custom CSS box and no changes were made to the header. Any other suggestions? Thanks

• 

  kevmarsden · Member · Nov 28, 2016 at 5:35 am

  • Copy link

  Each of the four “url” values will need to be updated with a link to the smaller images.

  If you have any other questions, please let us know.