highpatotoi
New Member
Currently building a website with Bootstrap for the first time. It's been simple and the responsive side is awesome! But I do have a few things I can't quite sort out.See, I made this website not long ago (http://aghicks.co.uk/) using Dreamweaver and tables... which I now realise was a big mistake. Hey-ho, I spent a few months properly studying HTML and CSS and have now been learning Boostraps ways.So far I have this` \[code\] <link href="http://stackoverflow.com/questions/14572264/css/bootstrap.css" rel="stylesheet" type="text/css"> <link href="http://stackoverflow.com/questions/14572264/css/stylesheet.css" rel"stylesheet" type="text/css"> <style type="text/css"> body { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; max-width: 1000px; border: 1px solid black; background:#EAEAEA; margin: auto; padding-top: 66px; } .redtext { color: #b83535; } a { color: #333; } a:hover { color: #b83535; text-decoration: none; } .align_right { text-align: right; } .logo { min-width: 286px; } span { font-weight: 300; } .navbar { padding-top: 34px; } .centered { float: none !important; margin-left: auto !important; margin-right: auto !important; text-align: center !important; } h4 { font-size: 16px; } /* Homepage */ /* Footer */ .footer_wrapper { max-height: 70px; } .footer { background-color: #999999; } .footer_text { color: #FFF; font-size: 10px; padding-top: 8px; padding-left: 8px; padding-right: 8px; }</style> <link href="http://stackoverflow.com/questions/14572264/css/bootstrap-responsive.css" rel="stylesheet" type="text/css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>AGHicks Homepage</title></head><body><div class="container-fluid"><!-- Header --> <div class="row-fluid"> <div class="span5 logo"> <img src="http://stackoverflow.com/questions/14572264/images/Logo.png" class="logo"> </div> <div class="span4 offset3"> <img src="http://stackoverflow.com/questions/14572264/images/Phone_icon.png" class="pull-left"> <h4 class="pull-right align_right">Northampton <span>01604786464</span><br><br>Mobile <span>07710537685</span></h4> </div> </div> <!-- Navbar --> <div class="navbar"> <div class="navbar-inner"> <div class="container"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <div class="nav-collapse collapse"> <ul class="nav"> <li><a href="http://www.google.com">Home</a></li> <li><a href="http://www.google.com">Gallery</a></li> <li><a href="http://www.google.com">About Us</a></li> <li><a href="http://www.google.com">Contact</a></li> </ul> </div> </div> </div> </div> <!-- Content --> <div class="row-fluid"> <div class="span6"> <img src="http://stackoverflow.com/questions/14572264/images/Homepage/Small_one_off_jobs.png" > </div> <div class="span6"> <div class="row-fluid"> <div class="span12"> <h5>Welcome to AGHicks Building Services website! We are a Northampton based, family run company with over 20 years experience. Hardwork, efficiency and reliability are instilled throughout the workforce and we have gained a strong reputation through word of mouth.</h5> </div> </div> <div class"row-fluid"> <div class="span12"> <img src="http://stackoverflow.com/questions/14572264/images/Homepage/Map_pin.png" > <h5 class="redtext">Northampton Based</h5> <img src="http://stackoverflow.com/questions/14572264/images/Homepage/Quote.png" > <h5 class="redtext">Free Quotes</h5> <img src="http://stackoverflow.com/questions/14572264/images/Homepage/Tools.png" > <h5 class="redtext">No Job Too Small</h5> <img src="http://stackoverflow.com/questions/14572264/images/Homepage/Piggybank.png" > <h5 class="redtext">Competitive Prices</h5> </div> </div> <div class="row-fluid"> <div class="span12"> <h5 class="redtext centered">OUR SERVICES INCLUDE</h5> </div> </div> <div class="row-fluid"> <div class="span5"> <ul> <li><strong>Conservatories</strong></li> <li><strong>Extensions</strong></li> <li><strong>Window & Door Refits</strong></li> <li><strong>Bricklaying</strong></li> <li><strong>Driveways</strong></li> <li><strong>Carpentry</strong></li> <li><strong>Patios</strong></li> <li><strong>Stonework</strong></li> </ul> </div> <div class="span6 offset1"> <ul> <li><strong>Plastering</strong></li> <li><strong>Kitchen & Bathroom Refits</strong></li> <li><strong>Tiling</strong></li> <li><strong>Fencing</strong></li> <li><strong>Fascias</strong></li> <li><strong>Garages & Carports</strong></li> <li><strong>Guttering</strong></li> </ul> </div> </div> </div> <!-- Footer --> <div class="row-fluid footer_wrapper"> <div class="span12"> <div class="row-fluid footer"> <div class="span5"> <p class="footer_text"><strong>Copyright ? AGHicks Building Services 2012 - All rights reserved.<br>Registered Address - 19 Bentley Close, Rectory Farm, Northampton, NN3 5JS.</strong></p> </div> <div class="span4 offset3 align_right"> <p class="footer_text"><strong>Web Design Services and SEO from <a href="http://www.benmil.tumblr.com/me">Ben Mildren</a></strong></p> </div> </div> </div> </div> </div> <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="http://stackoverflow.com/questions/14572264/js/bootstrap.min.js"></script></body>\[/code\]The issues I'm having can be seen is in these pictures http://imgur.com/jdSAKEk,CbbVrv7#0(The border around the body will be removed and the styling of the navbar will be changed)In the first image (desktop size),you'll see that the phone numbers icon doesn't line up next to the actual numbers and both the icon and the text aren't aligned with the bottom of the logo. I can achieve this by using padding, but then when you reduce the width of the browser the padding remains and causes huge gaps in the page.Second issue in the first image is that I cannot get those icons and red text in the middle right area to appear in a 'grid' formation like on www.aghicks.co.uk is currently.Lastly, On the second image, when the browser width is reduced the two lists down appear in line with each other when there is clearly enough space.Any help with any of the problems would be massively appreciated Thanks for reading this wall of text!