twitter bootstrap - How to make <p> within "jumbotron" responsive -
i'm pretty new coding , working on familiarizing myself html/css/bootstrap.
element in "jumbotron" class doesn't resize correctly when change size of screen (it piles on top of each other). see here: http://www.bohmerconstruction.com/test.html/ . if resize screen lower width, you'll see
element does. how shows on mobile.
here html:
<div class="jumbotron"> <div class="container"> <h1>let you</h1> <p><a href="http://www.bohmerconstruction.com/contact-bohmer-construction.html">contact free estimate</a></p> </div> </div>
and here css:
.jumbotron { background-image: url('http://constructotal.net/wp-content/uploads/2013/03/ist2_5357604-construction-background-1024x680.jpg'); background-size: cover; height: 100%; } .jumbotron h1 { color: white; margin-top: 95px; float: left; height: 100%; } .jumbotron p { font-size:18px; margin-top: 180px; margin-right: 480px; height:100%; } .jumbotron { color: #297acc; }
thanks suggestions!
it looks trying work of text align. margin right hurting you. let's rid of float not have set margin top on p element.
replace these declarations
.jumbotron p { font-size: 18px; text-align: left; }
and
.jumbotron h1 { color: white; margin-top: 95px; text-align: left; }
Comments
Post a Comment