Kann ich Module / Beiträge per CSS/HTML übereinander legen?

Ich möchte über meinen Header-Bildern jeweils Text platzieren (als overlay über das Bild).
Ich folgendermaßen vorgegangen.
Modul angelegt und auf position top-a-1 gelegt:

Html-Code:
<p><img src="images/kontakt.png" alt="kontakt" width="1780" height="630" /></p>

<style type="text/css">


.middle {
position: absolute;
left: 8em;
bottom: 6em;
width: 400px;
padding: 20px;
background-color: #fff;
font-weight: bold;
text-align: center;
}
</style>


<div class="shadow">

<div class="middle">


<h1>
Kennenlernen </h1>

</div>
</div>


Es funktioniert am Desktop ganz gut. Aber in der mobilen Darstellung ist der Text viel zu groß und falsch positioniert.
Was kann ich tun?
Danke.

Hallo, dann müssen sie für die mobile Ansicht eine eigene css schreiben mit media queries
www.w3schools.com/css/css_rwd_mediaqueries.asp