css - BootStrap Grid not working properly? -
i'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> © copyright 2012. rights reserved </p> </footer>
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
Post a Comment