Keep Text In <DIV> When Re-Sizing - css

Question

I have text that is overlayed on an image which is set as a background (main-logo). It works well for desktop but when scaling down to tablet or mobile devices the text remains a larger font size and just cuts off.
I'd like the background to expand and the text to stay inside the background (some scaling down of the text is fine). This is what I have:
<div class="full-logo" id="top">
<div class="col-lg-12 main-logo img-responsive">
<img src="\img\long.png" class="" alt="">
<br>
<h1 class="text-center">
<div class="col-md-8 col-centered-headline">WHO WE ARE</div>
</h1>
<h2 class="text-center">
<div class="col-md-8 col-centered-headline">
Our conference is one of the best technology conferences on the planet as voted on by readers of Industry Magazine. We take a different approach.
And that difference works for our attendees, ranging from Fortune 500 companies to the most exciting startups in the world.
Our speakers are world class, but our networking is “simply legendary”.
</div>
<br>
</h2>
</div>
</div>
And CSS contains this info:
/* Full Width Logo*/
.full-logo {
width: 100%;
height: 400px;
background-image: url('/img/bluesky.jpg');
background-size: cover;
margin-top: -9px;
}
.col-centered-headline {
display: inline-block;
float: none;
text-align: center;
margin-right: -4px;
color: white;
}

Answer 1

First, I would direct your toward Media Queries. But in your case, can you get away with just setting min-height on .full-logo?
.full-logo {
width: 100%;
min-height: 400px; /* <-- change 'height' to 'min-height' */
background-image: url('/img/bluesky.jpg');
background-size: cover;
margin-top: -9px;
}