column adjustments using Bootstrap & HTML -
for reason, when view webpage on desktop (normal window width), columns seem fine. however, when resize window, columns tend higher other columns.
code: (please resize window weird columns)
<!doctype html> <html> <head> <title>propel wd</title> <link rel="shortcut icon" href="/users/ryan/downloads/laptop3.jpg"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mtjoasx8j1au+a5wdvnpi2lkffwweaa8hdddjzlplegxhjvme1fgjwpgmkzs7" crossorigin="anonymous"> <link rel="stylesheet" href="css/animations.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0msbjdehialfmubbqp6a4qrprq5ovfw37prr3j5elqxss1yvqotnepnhvp9aj7xs" crossorigin="anonymous"></script> <link href='http://fonts.googleapis.com/css?family=lato&subset=latin,latin-ext' rel='stylesheet' type='text/css'> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <style> .opacitychange { position: relative; -webkit-animation: myfirst 1s linear 0s 1 alternate; /* chrome, safari, opera */ animation: myfirst 1s linear 0s 1 alternate; } /* chrome, safari, opera */ @-webkit-keyframes myfirst { 0% {opacity: 0.0;} 25% {opacity: 0.25;} 50% {opacity: 0.5;} 75% {opacity: 0.75;} 100% {opacity: 1.0;} } /* standard syntax */ @keyframes myfirst { 0% {opacity: 0.0;} 25% {opacity: 0.25;} 50% {opacity: 0.5;} 75% {opacity: 0.75;} 100% {opacity: 1.0;} } .module { background: white; margin: 3%; > h2 { padding: 1rem; margin: 0 0 0.5rem 0; } > p { padding: 0 1rem; } /*animation: widen 10s linear alternate infinite;*/ } .stripe-1 { color: white; background: repeating-linear-gradient( 45deg, #ed6b61, #ed6b61 10px, #f44336 10px, #f44336 20px ); } hr { height: 0.1px; background-color: gainsboro; } </style> </head> <body id="mypage" data-spy="scroll" data-target=".navbar" data-offset="60" class="text-center" style="margin: 40px; font-family: lato;"> <nav class="navbar navbar-default navbar-fixed-top" style="background-color: #f44336; border-bottom: none;"> <div class="container"> <div class="navbar-header" style="color: white;"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mynavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#mypage"><div style="color: white; font-size: 16px;">propel wd <span class="glyphicon glyphicon-circle-arrow-up"></span></div></a> </div> <div class="collapse navbar-collapse" id="mynavbar"> <ul class="nav navbar-nav navbar-right"> <li><a href="#"><div style="color: white; font-size: 13px;"><span class="glyphicon glyphicon-home"></span></div></a></li> <li><a href="file://localhost/applications/propeloms%3eabout.html"><div style="color: white; font-size: 13px;">about</div></a></li> <li><a href="file://localhost/applications/propeloms%3eservices.html"><div style="color: white; font-size: 13px;">services</div></a></li> <li><a href="file://localhost/applications/propeloms%3epricing.html"><div style="color: white; font-size: 13px;">pricing</div></a></li> <li><a href=""file://localhost/applications/propeloms%3eoi.html"><div style="color: white; font-size: 13px;">questions</div></a></li> <li><a href="file://localhost/applications/propeloms%3econtact.html"><div style="color: white; font-size: 13px;">contact</div></a></li> <li><a href="file://localhost/applications/propeloms%3etc.html" onclick="window.open('file://localhost/applications/propeloms%3etc.html', 'newwindow', 'width=400, height='); return false;"><div style="color: white; font-size: 13px;">terms</div></a></li> </ul> </div> </div> </nav> <div class="jumbotron text-center" style="margin-left: -40px; margin-right: -40px; color: white; background-color: #f44336;"> <h1>propel web design <span class="glyphicon glyphicon-circle-arrow-up"></span></h1> <h3>where websites matter</h3> </div> <hr> <h2 class="stripe-1" style="padding-top: 30px; padding-bottom: 30px; margin-right: 25%; margin-left: 25%;">why choose us?</h2> <hr> <article id="wcu" class="opacitychange"> <div class="module"> <div class="jumbotron stripe-1" style="background-color: #f44336; color: white; padding: 40px;"> <h3 style="letter-spacing: 1px;"> here @ propel web design, love make stylish , fancy websites. prices as low £300, make masterpiece! have huge variety of types of websites! business websites, information websites , more! our websites have seo, responsive design, 10 free stock images. go ahead! make website us! </h3> </div> </div> <hr> <div class="container"> <div class="module"> <div class="jumbotron stripe-1" style="background-color: #f44336; color: white; overflow: scroll;"> <div class="col-sm-4"> <span class="glyphicon glyphicon-gift" style="font-size: 50px;"></span> <span class="glyphicon glyphicon-star" style="font-size: 50px;"></span> <h4 style="font-size: 19px;">amazing websites</h4> <br> <p style="font-size: 15px;"> our brochure websites made small companies want themselves online. try make website professional , adequate. </p> </div> <div class="col-sm-4"> <span class="glyphicon glyphicon-phone" style="font-size: 50px;"></span> <span class="glyphicon glyphicon-envelope" style="font-size: 50px;"></span> <h4 style="font-size: 19px;">just email or telephone call away</h4> <br> <p style="font-size: 15px;" class="ni"> our blogs made people want share day day life world. try make website fancy , personalised possible. </p> </div> <div class="col-sm-4"> <span class="glyphicon glyphicon-briefcase" style="font-size: 50px;"></span> <span class="glyphicon glyphicon-wrench" style="font-size: 50px;"></span> <h4 style="font-size: 19px;">hard working</h4> <br> <p style="font-size: 15px;"> our personal websites people want talk recent trends , other controversial things. try make website clean , laid out. </p> </div> <div class="col-sm-4"> <span class="glyphicon glyphicon-heart" style="font-size: 50px;"></span> <span class="glyphicon glyphicon-certificate" style="font-size: 50px;"></span> <h4 style="font-size: 19px;">passionate</h4> <br> <p style="font-size: 15px;"> our informational websites want teach others online , share passions , interests. try make website fun , easy navigate. </p> </div> <div class="col-sm-4"> <span class="glyphicon glyphicon-gbp" style="font-size: 50px;"></span> <span class="glyphicon glyphicon-credit-card" style="font-size: 50px;"></span> <h4 style="font-size: 19px;">affordable</h4> <br> <p style="font-size: 15px;"> our informational websites want teach others online , share passions , interests. try make website fun , easy navigate. </p> </div> <div class="col-sm-4"> <span class="glyphicon glyphicon-th" style="font-size: 50px;"></span> <span class="glyphicon glyphicon-sort-by-alphabet" style="font-size: 50px;"></span> <h4 style="font-size: 19px;">all need</h4> <br> <p style="font-size: 15px;"> our informational websites want teach others online , share passions , interests. try make website fun , easy navigate. </p> </div> </div> </div> </div> <hr> <div class="container"> <div class="module"> <div class="jumbotron stripe-1" style="background-color: #f44336; color: white; overflow: scroll;"> <div class="col-sm-3"> <span class="glyphicon glyphicon-lock" style="font-size: 50px;"></span> <span class="glyphicon glyphicon-signal" style="font-size: 50px;"></span> <h4 style="font-size: 19px;">seo</h4> <br> <p style="font-size: 15px;"> all of our packages include seo, search engine optimisation. we've got seo on top 3 browsers in world. bing, yahoo , google. this useful when comes attracting more customers since people able view website on browser! </p> </div> <div class="col-sm-3"> <span class="glyphicon glyphicon-user" style="font-size: 50px;"></span> <h4 style="font-size: 19px;">domain names</h4> <br> <p style="font-size: 15px;" class="ni"> although our domain names hosted 3rd party hosters, we've chosen #1 website hosting service in uk, godaddy. we've got wide variety of domain names .com, .uk, .co.uk., .site , many more. </p> </div> <div class="col-sm-3"> <span class="glyphicon glyphicon-info-sign" style="font-size: 50px;"></span> <h4 style="font-size: 19px;">hd stock images</h4> <br> <p style="font-size: 15px;"> our hd stock images come adobe stock images. library has on 44 million photos picky size , content of image. know say! pictures worth thousand words! </p> </div> <div class="col-sm-3"> <span class="glyphicon glyphicon-info-sign" style="font-size: 50px;"></span> <h4 style="font-size: 19px;">responsive design</h4> <br> <p style="font-size: 15px;"> of our websites 100% responsive users able see websites no matter how big or small screen is! iphone imac, you'll still view it. </p> </div> </div> </div> </div> <hr> </article> </body> </html>
to clarify, referring column inconsistencies in section "amazing websites", "just e-mail or telephone call away", etc.?
if so—from looks of it, seems aren't wrapping each "row" of columns in <div class="row"></div> tags.
for bootstrap's grid work optimally, wrap each row of columns in "row" class, (or check out solution in context on jsfiddle):
<style> .box { margin-top: 20px; padding: 15px; border: 2px solid grey; } </style> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mtjoasx8j1au+a5wdvnpi2lkffwweaa8hdddjzlplegxhjvme1fgjwpgmkzs7" crossorigin="anonymous"> <div class="container"> <div class="row"> <div class="col-sm-4 box"> <h2>1st row, 1st column</h2> </div> <div class="col-sm-4 box"> <h2>1st row, 2nd column</h2> </div> <div class="col-sm-4 box"> <h2>1st row, 3rd column</h2> </div> </div> <div class="row"> <div class="col-sm-4 box"> <h2>2nd, 1st column</h2> </div> <div class="col-sm-4 box"> <h2>2nd row, 2nd column</h2> </div> <div class="col-sm-4 box"> <h2>2nd row, 3rd column</h2> </div> </div> </div>
Comments
Post a Comment