html - Simplified: White space on mobile when defining div min-width -
problem: white space appears @ bottom of page on mobile chrome.
i gutted isolate problem. there's single div. page takes full viewport fine, until define min-width div.
i tried css reset. did not solve problem.
am not using min-width?
edit (link page): http://www.hauntedbuckscounty.com/tools/environment.php
<html> <head> <meta charset="utf-8" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>haunted bucks county (hbc)</title> <!-- jquery --> <script type="text/javascript" src="http://www.hauntedbuckscounty.com/jquery-2.1.1.min.js"></script> <link rel="stylesheet" href="http://www.hauntedbuckscounty.com/style_theme.html"> <link rel="stylesheet" href="http://www.hauntedbuckscounty.com/css/reset_main.css"> <link rel="stylesheet" href="http://www.hauntedbuckscounty.com/css/reset_normalize.css"> <link rel="stylesheet" media="(min-width: 1200px)" href="carousel_1200px.css"> <link rel="stylesheet" media="(max-width: 1199px) , (min-width: 0px)" href="carousel_768px.css"> <!--min 768 temporarily set 0 allow later dev of mobile version--> <style> * { border: 0px solid red; } html {border:0px blue solid;} footer { margin-top: 0px; padding-top: 0px; } </style> </head> <body style="background-image:linear-gradient(#0e0e0f 70%, #1b1b1c);border:0px white solid;"> <div id="nav" style="position:relative;height:50px; width:100%;min-width:650px; background-color:blue;"> </div> </body> </html>
if want create responsive layout, mobile devices, should never use static min-width values, there many devices different screen resolutions.
to solve issue don't use min-width property, rather use width: 100% media query prefer, i.e.
@media screen , (max-width: 767px) { #nav { width: 100%; } } if continue use min-width responsive layouts, end ugly scrollbar or unwanted widths of elements inside website.
Comments
Post a Comment