May 28, 201214 yr Hi, I am using getskeleton grid system on my website: My website when I change my browser size to iPad (tablet) and mobile device size: the layout changed and breaks until I refresh the page and it sort of works, see screen grab and HTML below: HTML <!DOCTYPE html> <!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]--> <!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]--> <!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]--> <!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]--> <head> <meta charset="utf-8"> <title>AET</title> <meta name="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" type="text/css" href="stylesheets/base.css"> <link rel="stylesheet" type="text/css" href="stylesheets/skeleton.css"> <link rel="stylesheet" type="text/css" href="stylesheets/layout.css"> <link rel="stylesheet" type="text/css" href="stylesheets/aet.css"> <link rel="stylesheet" type="text/css" href="stylesheets/jqueryslidemenu.css" /> <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <link rel="shortcut icon" href="images/favicon.ico"> <link rel="apple-touch-icon" href="images/apple-touch-icon.png"> <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png"> <script src="javascripts/modernizr.custom.32233.js"></script> <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <script src="javascripts/tabs.js"></script> <!-- include Cycle plugin --> <script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#banners ul').cycle({ fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc... }); $("#menu ul li:last-child").addClass("nopadding"); }); </script> <!--[if lte IE 7]> <style type="text/css"> html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/ </style> <![endif]--> <script type="text/javascript" src="javascripts/jqueryslidemenu.js"></script> </head> <body> <div class="container"> <div class="nine columns"> <div class="logo"><img src="images/logo.jpg" alt="logo"/></div> </div> <div class="seven columns"> <div id="newsletter"> <form method="post" action="#" name="newsletter"> <p>Sign up to out e-newsletter</p> <input type="text" name="name" value="Name"/><input type="text" name="email" value="email" /><input type="button" name="submit" value="Sign up" /> </form> </div> </div> <div class="sixteen columns"> <div id="myslidemenu" class="jqueryslidemenu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Systems</a> <ul> <li><a href="#" title="AET Flexible Space UFAC">AET Flexible Space UFAC</a></li> <li><a href="#" title="Solar Hot Water Systems">Solar Hot Water Systems</a></li> <li><a href="#" title="Solar Cooling">Solar Cooling</a></li> </ul> </li> <li><a href="#">Products</a> <ul> <li><a href="#">Air Handling Units</a></li> <li><a href="#">Fan Terminal Units</a></li> <li><a href="#">Raised Access Floor</a></li> <li><a href="#">Solar Thermal Collectors</a></li> <li><a href="#">Chillers – Absorption Chillers</a></li> <li><a href="#">Heat Pump Technology</a></li> </ul> </li> <li><a href="#">Services</a> <ul> <li><a href="#">AET what we offer</a> <ul> <li><a href="#" title="Design">Design</a></li> <li><a href="#" title="Supply">Supply</a></li> <li><a href="#" title="Commissioning">Commissioning</a></li> <li><a href="#" title="Maintenance">Maintenance</a></li> </ul> </li> <li><a href="#" title="to be developed">to be developed</a> <ul> <li><a href="#" title="Offices To Let">Offices To Let</a></li> <li><a href="#" title="Showsuite / Demo zone">Showsuite / Demo zone</a></li> <li><a href="#" title="CPD Training">CPD Trainingt</a></li> <li><a href="#" title="AET Logistics – possibly new domain?">AET Logistics – possibly new domain?</a></li> </ul> </li> </ul> </li> <li><a href="http://www.dynamicdrive.com/style/">Projects</a> <ul> <li><a href="#" title="UFAC">UFAC</a></li> <li><a href="#" title="UFAC">Solar</a></li> </ul> </li> <li><a href="#" title="Contact">Contact</a> <ul> <li><a href="#" title="Office location map">Office location map</a></li> <li><a href="#" title="Distributor">Distributor</a></li> <li><a href="#" title="Personnel">Personnel</a></li> </ul> </li> </ul> <br style="clear: left" /> </div> <div id="banners"> <ul> <li> <h2>Whitehall Quay</h2> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultricies vulputate ipsum a aliquet. Integer aliquet vestibulum nibh, quis accumsan massa pharetra ac. </span> <img src="images/banner-1lg.jpg" alt="banner 1" /> </li> <li> <h2>Whitehall Quay</h2> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultricies vulputate ipsum a aliquet. Integer aliquet vestibulum nibh, quis accumsan massa pharetra ac. </span> <img src="images/banner-2lg.jpg" alt="banner 2" /> </li> <li> <h2>Whitehall Quay</h2> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultricies vulputate ipsum a aliquet. Integer aliquet vestibulum nibh, quis accumsan massa pharetra ac. </span> <img src="images/banner-3lg.jpg" alt="banner 3" /> </li> </ul> </div> </div> <div class="sixteen columns"> <div class="spacer"> </div> </div> <div class="one-third column"> <h4>Services</h4> <ul id="services"> <li class="aircon"><a href="#"><h5>Air Conditioning</h5></a><span>text</span></li> <li class="flooring"><a href="#"><h5>Flooring</h5></a><span>text</span></li> <li class="solarpanels"><a href="#"><h5>Solar Panels</h5></a><span>text</span></li> </ul> </div> <div class="one-third column"> <h4>Distributors</h4> <div class="map"> <a href="#">View map</a> </div> </div> <div class="one-third column"> <h4>Latest Updates</h4> <ul id="latest"> <li><a href="#"><h5>AET Launches Contant Air Volume Terminals</h5><span>text</span></a></li> <li><a href="#"><h5>AET Launches Contant Air Volume Terminals</h5><span>text</span></a></li> <li><a href="#"><h5>AET Launches Contant Air Volume Terminals</h5><span>text</span></a></li> </ul> </div> <div class="sixteen columns"> <div class="footer"> <strong>Advanced Ergonomic Technologies</strong> Company Registration number 2874101 </div> </div> </div><!-- container --> </body> </html> Please help!
May 28, 201214 yr It's because your banners are having their width detected and set inline by the slider JS.
May 28, 201214 yr Author That worked! Thanks so much! Do you know why there is lots of space at the top near the "sign up to Newsletter" form?
May 28, 201214 yr That worked! Thanks so much! Do you know why there is lots of space at the top near the "sign up to Newsletter" form? It is working fine for me Cheers
Create an account or sign in to comment