Reputation: 13
I am using Bootstrap to create a jumbotron for a website and I am having issues with the jumbotron not resizing properly on smaller screens.
Here is my code
HTML
<div class="jumbotron">
<div class="container">
<h1>Welcome to my jumbotron</h1>
<p>Another line of text here</p>
</div>
</div>
CSS
.jumbotron .container h1 {
color: black;
text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}
.jumbotron .container p {
color: black;
text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}
.jumbotron {
background-image: url(/Photos/BarnJumbo.jpg);
background-size: 100%;
background-repeat: no-repeat;
height: 500px;
}
The image of the background correctly resizes on mobile devices and when I shrink my browser screen but the words and the container do not resize to the proper size. When I take away the height:500px; the jumbotron does not display correctly anywhere.
Any help?
Upvotes: 1
Views: 2311
Reputation: 21663
You can use media queries to change the height and anything else that needs adjustment. See example.
*Update:
1) This CSS file (
crosscreekcattle.css
) needs to be after the Bootstrap CSS file(s) in order for any changes to apply that come from Bootstrap (as a general rule).
2) As stated initially ("anything else that needs adjustment"), you would need to change the font-size of your text inside the Jumbotron at whatever breakpoint you feel is appropriate.
Add/Changed CSS directly below: See working example in Snippet at full-screen, then reduce the browser size.
.jumbotron {
background: url(http://crosscreekcattlenc.com/Photos/BarnJumbo.jpg) center center;
background-size: cover;
background-repeat: no-repeat;
height: 500px;
}
@media (max-width: 767px) {
.jumbotron {
height: 250px;
}
.jumbotron .container h1 {
font-size: 25px;
}
.jumbotron .container p {
font-size: 16px;
}
}
.navbar .nav {
padding: 5px;
}
.navbar .nav li {
display: inline;
}
.navbar .nav a {
color: black;
padding: 15px;
font-family: 'Trebuchet MS', "sans-serif";
font-size: 15px;
}
.navbar .navbar-brand > img {
object-fit: contain;
max-height: 175%;
height: 175%;
}
.jumbotron .container h1 {
color: black;
text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}
.jumbotron .container p {
color: black;
text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}
.jumbotron {
background: url(http://crosscreekcattlenc.com/Photos/BarnJumbo.jpg) center center;
background-size: cover;
background-repeat: no-repeat;
height: 500px;
}
.jumbotron-special {
background-image: url(/Photos/CattleJumboo.jpg);
background-repeat: no-repeat;
height: 500px;
}
.services {
background-color: #D5D5D5;
padding-bottom: 20px;
padding-top: 10px;
}
.services .container p {
padding-bottom: 5px;
}
.about {
padding-bottom: 50px;
}
.contact {
background-color: #D5D5D5;
padding-bottom: 20px;
}
.Flexible-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.Flexible-container iframe,
.Flexible-container object,
.Flexible-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.information {
padding-bottom: 25px;
}
.sale {
background-color: #D5D5D5;
}
.row-special {
padding-top: 20px;
}
.footer {
background-color: #CBCBCB;
padding-top: 10px;
}
.footer li {
display: inline;
padding-right: 60px;
}
@media (max-width: 767px) {
.jumbotron {
height: 250px;
}
.jumbotron .container h1 {
font-size: 25px;
}
.jumbotron .container p {
font-size: 16px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="CrossCreekCattle.html">
<img src="http://crosscreekcattlenc.com/Photos/CCCNC.jpg" class="img-responsive">
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="home.html">Home <span class="sr-only">(current)</span></a>
</li>
<li><a href="About.html">About</a>
</li>
<li><a href="Cattle.html">Cattle</a>
</li>
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Links <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="https://www.facebook.com/CrossCreekCattle" target="_blank">Cross Creek Cattle Facebook</a>
</li>
<li><a href="http://www.redanguscarolinas.com/" target="_blank">Red Angus Assoication of the Carolinas</a>
</li>
<li><a href="http://www.seraa.org/" target="_blank">Southeast Red Angus Association</a>
</li>
<li><a href="http://redangus.org/" target="_blank">Red Angus Assoicaiton of America</a>
</li>
<li><a href="https://www.facebook.com/pages/2-Sisters-FOODS/367845410066719?fref=ts" target="_blank">2 Sisters FOODS</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron">
<div class="container">
<h1>Welcome to Cross Creek Cattle</h1>
<p>One of North Carolina's premier Red Angus Cattle Ranches</p>
</div>
</div>
<div class="services">
<div class="container">
<div class="row">
<div class="col-md-7">
<h2>Who We Are</h2>
<p>Cross Creek Cattle is located in Gold Hill, North Carolina. Started in 1981, it has been our mission to breed some of the best cattle in the Carolinas. With over 17 years of expierence in Red Angus, CCC has excelled in genetic quality that is
evident in all of our cattle and embryos.</p> <a href="Cattle.html">Click here to learn more about what we have to offer.</a>
</div>
<div class="col-md-5">
<div class="thumbnail">
<a href="Cattle.html">
<img src="http://crosscreekcattlenc.com/Photos/CowLink.jpg">
</a>
</div>
</div>
</div>
</div>
</div>
<div class="pictures">
<div class="container">
<div class="row text-center">
<h2>Pictures From Around The Farm</h2>
</div>
<div class="row">
<div class="col-md-4 col-sm-3">
<div class="thumbnail">
<img src="/Photos/Grid1.jpg">
</div>
</div>
<div class="col-md-4 col-sm-3">
<div class="thumbnail">
<img src="/Photos/Grid2.jpg">
</div>
</div>
<div class="col-md-4 col-sm-3">
<div class="thumbnail">
<img src="/Photos/Grid3.jpg">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-3">
<div class="thumbnail">
<img src="/Photos/Grid4.jpg">
</div>
</div>
<div class="col-md-4 col-sm-3">
<div class="thumbnail">
<img src="/Photos/Grid5.jpg">
</div>
</div>
<div class="col-md-4 col-sm-3">
<div class="thumbnail">
<img src="/Photos/Grid6.jpg">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-3">
<div class="thumbnail">
<img src="/Photos/Grid7.jpg">
</div>
</div>
<div class="col-md-4 col-sm-3">
<div class="thumbnail">
<img src="/Photos/Grid8.jpg">
</div>
</div>
<div class="col-md-4 col-sm-3">
<div class="thumbnail">
<img src="/Photos/Grid9.jpg">
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<ul class="footer">
<li><a href="CrossCreekCattle.html">Home</a>
</li>
<li><a href="About.html">About and Contact</a>
</li>
<li>Web Development by Keith Pringle</li>
</ul>
</div>
</div>
Upvotes: 1