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

Popular posts from this blog

dns - How To Use Custom Nameserver On Free Cloudflare? -

python - Pygame screen.blit not working -

c# - Web API response xml language -