I am looking to scale some text and position it over an image on mobile devices.
<style>
#rcontainer {
height: 340px;
width: 100%;
position: relative;
}
.rtext span {
position: absolute;
bottom: 130px;
font-family: "Georgia", serif;
font-size: 1.8em;
color: white;
padding: 0 40px;
width: 100%;
line-height: 110%;
}
@media screen and (min-width: 0px) and (max-width: 720px) {
.rtext {
font-size: 50%;
padding: 0 40px 100px 0;
}
</style>
<div id="rcontainer">
<img alt="" src="/portals/0/Images/photos/rexanne_griffeth_contact_info_850.png" />
<p class="rtext">
<span>Contact: Rexanne Griffeth<br />
6000 Hospital Drive<br />
Hannibal, MO 63401<br />
(573) 629-3564<br />
<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="186a7d607976767d367f6a717e7e7d6c7058706a7077767471767d36776a">[email protected]</a>
</span></p>
</div>
While I have successfully adjusted the font size with my media query, I'm struggling to position the text correctly over the image.
You can view the current results on my development URL. Click here.