css - BootStrap Grid not working properly? -


enter image description herei've been working on website bootstrap , reason grid i've set isn't working. have website thats 2 columns, 1 column takes 4 grid spaces , other 8 spaces. once size of page reaches mobile, width of 8 grid picture screws up. here code

<!doctype html> <!-- website template freewebsitetemplates.com --> <html> <head>     <meta charset="utf-8">     <meta name="viewport" content="width=device-width; initial-scale=1.0">     <title>contact</title>     <link rel="stylesheet" href="css/contact.css" type="text/css">              <link rel="stylesheet" href="bootstrap/css/bootstrap.css">              <style>              .header{             padding:0;}                 .leftcol{                  width:100%;                 height:800px;                      }              .rightcol{                 width:112.3%;                 height:800px;                 }              .text{                 color:black;                 position:absolute;                 top:10%;                 left:35%;             }              .contact_image{                 width:50%;                 position:absolute;                 top:70%;                 left:27%;             }              </style> </head>   <body> <div class="container">   <header class="row">  <div class="header col-lg-10 col-md-10 col-sm-10 col-xs-12"> <img  id="papa" src="newimages/papaupdated.png"> </div>   <div class="col-lg-2 col-md-2 col-sm-2 hidden-xs"> <img src="newimages/remaxlogo.jpg">   </div>  </header>  <div class=" navigation navbar navbar-default row"> <ul class="nav navbar-nav">                 <li>                     <a href="index.php">home</a>                 </li>                 <li>                     <a href="opportunities.php">opportunities</a>                 </li>                 <li>                     <a href="propertymanagement.php">property management</a>                 </li>                 <li>                     <a href="aboutjay.php">about jay</a>                 </li>                 <li>                     <a href="community.php">community</a>                 </li>                 <li class="selected">                     <a href="contact.php">contact</a>                 </li>              </ul> </div>  <div class=" row col-lg-4 col-md-4 col-sm-4 hidden-xs" > <img class="row leftcol" src="newimages/leftsidebackground.jpg"> </div>    <div class="  row col-lg-8 col-md-8 col-sm-8 col-xs-12">     <img class="rightcol row" src="images/greyimage.jpg">           <div class="text col-lg-12">           <p> email me @ <a href="mailto:jay@jaycousins.com">jay@jaycousins.com</a></p>                     <p>(250) 751-1223 office</p>                     <p>(250) 751-1300 fax</p>                     <p><span style="color:red;">re/max</span> jay cousins realty</p>                     <p>#1-5140 metral drive</p>                     <p >nanaimo b.c. canada</p>                     <p >(250) 751-1223 bus.</p>                     <p>(250) 751-1300 fax.</p>                     <p >"each office independently owned & operated"</p></div>                      <img class="contact_image" src="newimages/cityimage.jpg">   </div>   <footer class=" row col-lg-12">              <p>                 &copy; copyright 2012. rights reserved             </p> </footer> 

enter image description here

remove row in class=" row col-lg-8 col-md-8 col-sm-8 col-xs-12" . use wrapping div class row.

also use class row footer , add inner div class col-lg-12.

in header, correct.


Comments

Popular posts from this blog

c# - Validate object ID from GET to POST -

node.js - Custom Model Validator SailsJS -

php - Find a regex to take part of Email -