Extra pixels hiding out somewhere (HTML/CSS) -
so have site i'm working on , pretty happy it, reason there maybe 15-30 pixels chilling out on right hand side. played bunch see if can fix it, appears fix pixels on right side creates more pixels somewhere else.
html
<!doctype html> <html> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <head> </head> <body> <div class="grid-container outline"> <nav> <ul><div class="floatleft"> <li><a href="#" width="50" height="50"></a></li> <li><a href="#"><img src="img/twitter.png" width="50" height="50"></a></li> <li><a href="#"><img src="img/instagram.png" width="50" height="50"></a></li> <li><a href="#"><img src="img/youtube.png" width="50" height="50"></a></li> </div> <div class="floatright"> <li><a href="#trump"><img src="img/ghfjg.png" width="50" height="50"></a></li> <li><a href="#"><img src="img/nufj.png" width="50" height="50"></a></li> <li><a href="#"><img src="img/ykg.png" width="50" height="50"></a></li> <li><a href="#"><img src="img/oiyg.png" width="50" height="50"></a></li> </div> </ul> </nav> <header> <div class="col-6" <div id="logo" align="center"> <img src="img/logo2.png"> <h1>#be animated</h1> </div> </header> <main><!--start grid--> <!--main top section--> <div class="row"> <div id="demo" class="col-6"> <iframe width="800" height="450" src="#" frameborder="0" allowfullscreen></iframe> </div> </div> <div class="row"> <div class="col-6b"> <h1> copy here</h1><br> <a href="#"><img src="img/appstore2.png" width="150" height="50"></a></div> </div> </div> <div class="col-1"> </div> <!---featured apps--> <div class="featuredapps"><a name="app1"> <div class="row"> <div class="col-1"></div> <div class="col-6"> <h3>featured apps</h3> <h2>app1</h2> </div> </div> <div class="row"> <div class="col-1"></div> <div class="col-1"> <img src="img/ytfh.png" align="right" width="150" height="150"> </div> <div class="col-2" id="copy"> <p>copy here</p> </div></a> </div> <div class="row"> <div class="col-1"></div> <div class="col-6"> <h2>something here</h2> </div> </div> <div class="row"> <div class="col-1b"></div> <div class="col-2"> <p>copy here</p> </div> <div class="col-1"> <a href="https://linkage"><img src="img/utfgh.png" align="left" width="150" height="150"></a> </div> </div> <div class="row"> <div class="col-1"></div> <div class="col-6"> <h2>ouaz 3d<br> once upon zombie</h2> </div> </div> <div class="row"> <div class="col-1"></div> <div class="col-1"> <a href="https://more linkage"><img src="img/olkjhl.png" align="right" width="150" height="150"></a> </div> <div class="col-2"> <p>blahblahvjghfjhfhj</p> </div> </div> <div class="row"> <div class="col-1"></div> <div class="col-6"> <h2>ioyjgu</h2> </div> </div> <div class="row"> <div class="col-1b"></div> <div class="col-2" id="copy"> <p>jkfghds</p> </div> <div class="col-1"> <a href="https://link"><img src="img/jhg.png" align="left" width="150" height="150"></a> </div> </div> </div> <!---more fun nito--> <div class="link"> <div class="row"> <div class="col-6"> <h2>ilulugkglkj</h2> </div> <div class="col-6"> <a href="#iytfhg"><img src="img/lih.png" width="100" height="100"></a> <a href="lk7715?mt=8"><img src="img/nito250.png" width="100" height="100"></a> </div> </div> </main> <footer> <div class="col-6"> <img src="img/footer_test.png"> <p> copyright ©2016d sana york, ny. <a href="privacy.html">privacy policy</a> </p> </div> </footer> </body> </html> css:
*{ font-family: 'lato', sans-serif; font-weight: lighter; text-align: center; vertical-align: middle; color: #3e3e3e; } body{ background: #91b0cd; background: -webkit-linear-gradient(#91b0cd, white); /*gradient safari*/ background: -o-linear-gradient(#91b0cd, white); /*gradient opera*/ background: -moz-linear-gradient(#91b0cd, white); /*gradient firefox*/ background: linear-gradient(#91b0cd, white); align: center; } /*p{ font-weight: lighter; color: #3e3e3e; }*/ header{ padding: 30px 0 0 0; } h1{ font-size: 24px; color: white; } h2{ font-size: 26px; } h3{ margin-top: 0; color: #ffffff; } iframe{ max-width:100%; } ul { display: inline; list-style-type: none; margin: 0; padding: 0; } nav li{ display: inline; } img{ max-width: 100%; height: auto; } footer{ font-size: 80%; text-align: center; /*padding: 180px 0 0 0; /*background-image: url("img/footer_test.png");*/ max-width: 100%; background-repeat: no-repeat; background-position:center bottom; background-size: 100%; } footer p{ /*background-image: url("img/footer_test.png");*/ color: black; background-color: white; /*opacity: 0.75;*/ font-weight: bold; } .floatleft { float:left; } .floatright { float:right; } .featuredapps{ /*margin-left: auto; margin-right: auto;*/ color: #3e3e3e; margin-top: 0px; } .featuredapps p{ color: #3e3e3e; } .nitofam img{ margin: 10px; padding: 10px; } #demo img{ display: block; margin-left: auto; margin-right: auto; } #nav{ align: center; repeat: no-repeat; } #logo img{ width: 15%; height: 15%; } .grid-container{ width: 100%; max-width: 1800px; } /*-- our cleafix hack -- */ .row:before, .row:after { content:""; display: table ; clear:both; } [class*='col-'] { float: left; min-height: 1px; width: 16.66%; /*-- our gutter -- */ padding: 12px; /*background-color: #ffdcdc;*/ } .col-1{ width: 16.66%; } .col-1a{width: 20%;} .col-1b{width: 25%;} .col-2{ width: 33.33%; } .col-3{ width: 50%; } .col-4{ width: 66.66%; } .col-5{ width: 83.33%; } .col-6{ width: 100%; } .col-6b{ width: 70%; margin-left: 15%; margin-right: 15%;} /*.outline, .outline *{ outline: 1px solid #f6a1a1; }*/ /*-- column content styling --*/ [class*='col-'] > p { /*background-color: #ffc2c2; */ padding: 0; margin: 0; text-align: center; vertical-align: center; } @media screen , (max-width: 600px) { nav { height: auto; } nav ul { width: 100%; display: block; height: auto; } nav li { width: 50%; /*float: center;*/ } .floatleft { float:none; } .floatright { float:none;} }
Comments
Post a Comment