Background image on tablet/mobile

[esucces]

Hi Dante team!

On all my pages I use a “Page Title Background” image. Looks good on desktop and tablet landscape mode.
But on mobile and tablet portrait, the image is “pushed” down under the logo/mobile menu. See screenshots.

Why is that happening, and can you help me solve this?

[esucces]

This reply has been marked as private.

[Mohammad – SUPPORT]

Hi,
Please go to Admin -> Theme Options -> Custom CSS => Here put this code and update options

@media only screen and (min-width: 767px) {.page-heading h1{margin-top:-90px}}
@media only screen and (max-width: 479px) {{.page-heading h1{margin-top:-90px}}

Thanks 🙂
With Best Regards
Swift Ideas

[esucces]

Sorry Mohammad – but that has no effect whatsoever?!

[Mohammad – SUPPORT]

Hi,
Please remove that one code and use this one

@media only screen and (min-width: 767px) {.page-heading h1{margin-top:-90px}}
@media only screen and (max-width: 479px) {.page-heading h1{margin-top:-90px}}

Thanks 🙂
With Best Regards
Swift Ideas

[esucces]

Still no effect at all – neither on mobile or tablet 🙁

[Mohammad – SUPPORT]

Hi,
Please check after clear cache . It should work 100% .
Thanks

[esucces]

I’m truly sorry, but that does not work…

I cleared cache on both mobile and tablet. No luck. I tried “incognito mode”. No luck.

But it for sure messes up the view in desktop mode! See screenshot…

[Mohammad – SUPPORT]

Hi,
Please remove all of my css and check in desktop mode . Let me know your feedback . After I will suggest further .
Thanks 🙂
With Best Regards
Swift Ideas

[esucces]

Without your code, site looks good on desktop and tablet portrait again 🙂

[Mohammad – SUPPORT]

Hi,
Please use this code for mobile and let me know your feedback .
@media only screen and (max-width: 479px) {.page-heading {margin-top:-155px}}

Thanks

[esucces]

That’s a winner Mohammad 🙂 Looks good!

[Mohammad – SUPPORT]

Hi,
Please use this code now for tablet
@media only screen and (max-width: 991px) {.page-heading {margin-top:-155px}}

Thanks

[esucces]

Thanks, solution works perfectly 🙂

Just a little extra question:
How do I make the little mobile menu icon white instead of black?

[Mohammad – SUPPORT]

Hi,
Please use this css
#logo a.mobile-menu-show{color:#fff;}
Thanks