Page Header: how to make compatible for laptop/tablet/mobile?

Hello again!

I am trying to arrange my page header in a way that looks great on laptops, tablets and mobiles. But I can’t get a satisfactory result for the 3 together. Here are my site title and tagline:
Title: Le Blog du Caire
Tagline: Récits, coups de c?ur et bonnes adresses
Knowing that I have an image on my page header, whose top part is the sky so can accommodate the title and the tagline.
The problem is that the tagline is displayed on the bottom part of the image on tablet/mobile versions so it is not easily readable. I tried to reduce the top distance & font size of the title to have them both on the upper part of the image but then title & tagline do not look great on the laptop version.
What is the solution? Can I hide the tagline on tablet/mobile versions? Or is there any other solution?
Thanks!!!

The page I need help with: [log in to see the link]