[eddie123]

Hello,
I’v been trying to add a responsive Jumbotron with image + text to a page. Therefore I stripped the code for Jumbotron in another WordPress template (with Bootstrap) and pasted it in my Page editor in Tempera tempate.
Problem I encounter is that either image or text partly falls out of the Jumbotron (at bottom) when I decrease screen size. Somehow I can’t get Bootstrap Jumbotron working if I put it in another template.

Code:
<div class=”jumbotron>

<h1>Text here</h1>
</div>

My css for jumbotron:
#content .jumbotron {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.2);
border-radius: 12px;
color: #FFFFFF;
padding-bottom: 30px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
}
#content .jumbotron {
margin-bottom: 30px;
text-align: center;
height: 250px;
}

#content .jumbotron h1 {
font-size:60px;
line-height: 1;
margin-top: 0;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
margin-top: 20px;
color: #fff;
}

#content .jumbotron .img {
padding-left: 20px;
}

/* @MEDIA 960PX*/

@media (max-width: 960px) {
#content .jumbotron {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.2);
margin: 0;
padding: 0 20px;
}
#content .jumbotron h1 {
font-size: 40px;
line-height: 1;
margin-top: 0;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
margin-top: 20px;
color: #fff;
}
}

/* @MEDIA 768PX*/
@media (max-width: 768px) {
#content .jumbotron {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.2);
margin: 0;
padding: 0 20px;
}
#content .jumbotron h1 {
font-size: 20px;
line-height: 1;
margin-top: 0;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
margin-top: 20px;
color: #fff;
}
}
.img {
display: block;
height: auto;
max-width: 100% !important;
max-height: 100% !important;
}

[Author]

Posts