javascript - Where does this extra space come from? -
as seen in picture(i put code in try , make little easier). website scrolled sideways (which shouldn't happen) , body in blue outline there scrollable space @ right hand side.
as can see in css can hide "extra" space using overflow-x: hidden; it's not enough because if use float: right; on element, while using overflow-x: hidden;, float: right; element off edge of screen.
my question "extra" space coming from?
<!doctype html> <html> <head> <meta charset="utf-8"> <title>test site</title> <meta name="viewport" content="width=device-width, initial-width=1, user-scalable=0"> <link rel="stylesheet" type="text/css" href="assets/css/style.css"> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> </head> <body> <!-- <div id="navanchor"></div>anchor change nav size on scroll--> <div id="container"> <nav id="nav"> <img id ="logo" src="http://placehold.it/160x75" alt="max's barbers logo."> <ul id="menu"> <li><a href="#top">home</a></li> <li><a href="#prices">prices</a></li> <li><a href="#aboutus">about us</a></li> <li><a href="#contact">contact</a></li> </ul><!--menu--> </nav> <!--slider--> <!--=============--> <!--end slider--> <!-- <div id="top"></div>anchor scroll top button--> </div><!--container--> <!--scripts =====================================================--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> <!--custom js =====================================================--> <script src="assets/js/app.js"></script> <!--==============--> </body> </html> & css
/* 1 - fonts 2 - site wide styles 2a - navigation 2b - scrollbar 2c- selection 3 - sections 4 - media queries ==============================================================*/ /* 1 - fonts ==============================================================*/ @import url(http://fonts.googleapis.com/css?family=oswald|raleway); /* font-family: 'oswald', sans-serif; font-family: 'raleway', sans-serif; */ /* 2 - site wide styles ==============================================================*/ * { color: #75e7ff; font-family: 'oswald', sans-serif; -webkit-transition: 0.43s cubic-bezier(0.35, 1.32, 0.49, 1.01); transition: 0.43s cubic-bezier(0.35, 1.32, 0.49, 1.01); } html, body { margin: 0; padding: 0; width: 100%; /* overflow-x: hidden;*/ } body { background-color: #383838; } #container { width: 100%; } ul { margin: 0; padding: 0; } /* 2a - navigation ==============================================*/ nav { width: 100vw; height: 4.75em; padding: 0.5em 2em; background-color: rgba(255, 255, 255, 0.25); } #menu { float: right; margin-top: 1.5em; margin-right: 5.25em; } #menu li { display: inline; margin-left: 1.5em; } #menu li:first-child { margin: 0; } /* 3 - sections ==============================================================*/ /* 3a - home ==============================================*/ /* 4 - media queries ==============================================================*/
there 2 issues causing problem. first,
nav { width: 100vw; /* remove -- don't need it! */ ... } second, mentioned in other answer,
#menu { float: right; margin-top: 1.5em; margin-right: 0; /* changed 5.25em */ } jsfiddle: http://jsfiddle.net/voveson/0glvog4q/1/
Comments
Post a Comment