Portfolio - Overlaying text over a Jumbotron

I have a jumbotron which is actually a background image. The cool thing, is when the browser is manipulated, or on mobile, it scales to fit the browser size.

However, the text does not, so the text ends up shooting out of the borders of the jumbotron and looking all weird.

Is there any fix or workaround for this? I’ve had to position the text using css like this:

#bigtitle{
text-shadow: 2px 1px 2px #000;
font-size: 5em;
color: #6FFBFC;}

.title{
text-shadow: 2px 1px 2px #000;
color: #6FFBFC;
margin-top: 0px;
margin-left:80px;
padding-top: 0px;
}
#slogan{
margin-top: 240px;
margin-left: 300px;}

As you can see, in order to get the text to display on the jumbotron where I want it to, I had to play with margins.

Is there any way to make this text “responsive?” while also still displaying it how I want on the full version? Thanks. I’ve taken a snapshot of the text so you get an idea of what I’m doing here. Obviously, my actual page is using a jumbotron rather than a raw image like I have attached. Also, I’ve since changed the text color and phrasing but the idea is the same:

Thank you.

Is this on Codepen by any chance? I don’t know the answer off hand, but I would like to tinker with it to test some theories :slight_smile:

No it’s not currently :/. Honestly, I try to avoid CP as much as I can for projects that I actually intend to put online. I was finding that when I would try to make a “real” webpage, I was running into problems because I had no practice/experience with reference inclusion order and other issues specific to working with actual local HTML/CSS/JS files, plus I prefer to work with my browser’s console directly. Might be able to throw it up on there later though and if so I’ll link you up. Thanks a lot!

Hi. I have run into the same problem and managed to make my text responsive using media queries. To do this, make sure to include jQuery in your css first, and then in order to change text size when the screen is a specific width use the following code:

@media only screen and (max-width:Xpx) {
body{font-size: Xpx;}
}

You can run those lines of code multiple times changing max-width for small, medium, and large screens.For mobile screens, you can set max-width to 680px.
Note: This may not work if your text elements are in pixels. Set the size for them with _em_s.

Here are a couple sites that may help you with this:
http://stackoverflow.com/questions/14537611/bootstrap-responsive-text-size
http://www.w3schools.com/css/css_rwd_mediaqueries.asp
Hopefully this helps you…:smiley: