html - (Bootstrap 3) Text and images with jumbotron get distorted when changing screen sizes -
today have made webpage using bootstrap 3, have change 'jumbroton' coding make this: http://www.bootply.com/103783
although background image shows through, when resize page doesn't not resize instead puts text , image within 'jumbotron' underneath else.
i have tried putting 'container' around the'jumbotron' no luck... :(
my website: http://warfacecommunity.bugs3.com/
try scrolling in , see meant!
css code in 'style.css'
.bg { background: url('/img/bg.jpg') no-repeat center center !important; position: fixed !important; width: 100% !important; height: 350px !important; /*same height jumbotron */ top:0 !important; left:0 !important; z-index: -1 !important; } .jumbotron { margin-bottom: 40px !important; height: 350px !important; color: white !important; text-shadow: black 0.1em 0.3em 0.3em !important; background:transparent !important;
html 'jumbotron'
<div class="jumbotron"> <img src="./img/the-blue-tick-md.png" alt=" " vspace="20" class="pull-right" class="img-responsive"/> <h1> hello, world! </h1> <p> template simple marketing or informational website. includes large callout called hero unit , 3 supporting pieces of content. use starting point create more unique. </p> <p> <a class="btn btn-primary btn-large" href="#">learn more</a> <a class="btn btn-primary btn-large" href="#">extras</a> </p> </div>
you close,
you should divide in 2 parts. , add jumbotronwidth class max-width make responsive
<div class="jumbotron"> <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 pull-right "> <img vspace="20" class="jumbotronwidth" alt=" " src="./img/the-blue-tick-md.png"> </div> <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8"> <h1> hello, world! </h1> <p> template simple marketing or informational website. includes large callout called hero unit , 3 supporting pieces of content. use starting point create more unique. </p> <p> <a class="btn btn-primary btn-large" href="#">learn more</a> <a class="btn btn-primary btn-large" href="#">extras</a> </p> </div></div>
css
.jumbotronwidth { max-width:100%; }
Comments
Post a Comment