Disabling Header Image for Mobile Devices

Hello,

Overall, I am very happy with Sydney Pro. I am having difficulty with the mobile version, though. My header image is not resizing with any semblance to its original dimensions, and I’d like to either:

  1. Disable it all together; OR

  2. Adjust the image so that it is better responsive for iPhones

My website is http://kristismithyoga.com/

Either solution would make me happy, although I can’t figure out how to do either. For (1) there is the caveat that if I were to do this, I would want to replace the header image with my logo (which is white text on a transparent background), but I do not want to change my colors on the desktop version of the site.

Can you please help me to find solutions to (1) and/or (2)? Thank you very much!

Hi,

Background images set to cover don’t behave like regular images. Try adding this in a custom CSS plugin and let me know please:


@media (max-width: 460px) {
  .header-image {
    height: 150px;
    background-position: top;
  }
}

Would also help if your image is just a little bigger in height.

Thanks for the code, Vlad. I tried it and it definitely helped, although I’m still not seeing nearly enough image, and I don’t want to increase the height because it will be too big on PCs…is there any code that would allow me to use a different image (eg, I have a square png logo image I could use instead, but I don’t want it to show up on the main website).

Thanks!

You could increase the height propriety in the code I gave you.
Also, you could give a try to the bundled Revolution Slider plugin. It might be better suited in your case as it works differently from the header image.

You can’t have a different image on small screens, sorry.
We could implement it but that would require a lot of checks and extra code and I’m not sure it’s worth the extra load on the theme, especially as most people are using Revolution Slider anyway.

Thanks, Vlad. I may try the slider again.

Hi Vlad,

Glad I found this thread - you mention that it isn’t possible to upload a separate header image only for mobile - that’s what I’ve been trying to do for the last few days! Haha - now I can stop searching! –
Alternatively, is there a way to resize the current header? As - at the moment - the text on the header is too small to read on a mobile device.
My site is www.balance-golf.com

Any advice is much appreciated!!

Thank you
CEG

hi Vlad,
i’m having the same problem for few days,and really need your support now i’m using yamidoo magazine 2.0.4 theme how do i resize the header ad for mobile viewers