Text over Image - Make is responsive for smaller screens - html

Question

I'm very new to programming and I'm trying to modify my Retina template to customize my Shopify store. It's been fun so far and have had good results!
However I'm stuck on this question: How do I make my code responsive?
I managed to add the HTML and CSS codes to have text over image, but I can't figure out to make it responsive (text automatically adjust its size) for smaller screens (ex. mobile)
HTML Code
<div class="textoverimage">
<img src="xxxxxx" alt="xxxx">
<h7> TEXT </h7>
</div>
CSS Code:
/* #Custom Styles
================================================== */
.textoverimage {
position: relative;
width: 100%;
}
h7 {
position: absolute;
top: 75px;
left: 0;
width: 100%;
text-align: center;
}
I used h7 not to interfere with any preexisting codes (Shopify used h1-h6)

Answer 1

You can attain it through media queries.
#media only screen and (max-width:500px) {
h7 {
        font-size:14px;
    }
}
This will make the font size of the h7 to 14px when the screen width drop below 500px.

Answer 2

If your making custom css in shopify then you need both image and text responsive
Here is your answer for make them both responsive Live On FIDDLE.
.img-reponsive {
display: block;
max-width: 100%;
height: auto;
margin: 0 auto;
}
.textoverimage {
position: relative;
}
p.title {
position: absolute;
top: 75px;
left: 0;
text-align: center;
font-size: 38px;
width: 100%;
color: #fff
}
#media only screen and (max-width: 767px) {
p.title {
font-size: 1.5em;
line-height: 1.5em;
}
}
#media only screen and (max-width: 479px) {
p.title {
font-size: 1.1em;
line-height: 1.1em;
}
}
<div class="textoverimage">
<img class="img-reponsive" src="http://cdn.shopify.com/s/files/1/0258/1101/t/2/assets/slideshow_3.jpg?5808719635421587686" alt="xxxx">
<p class="title"> TEXT </p>
</div>