Search code examples
htmlcssmobilewidthremoving-whitespace

Simplified: White space on mobile when defining div min-width

Problem: White space appears at bottom of page on mobile Chrome.

I gutted everything to isolate the problem. There's now a single div. Page takes up full viewport just fine, until I define a min-width for the div.

I tried a css reset. Did not solve problem.

Am I just not properly using min-width?

Edit (link to 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) and (min-width: 0px)" href="Carousel_768px.css"> <!--MIN NORMALLY 768 BUT TEMPORARILY SET TO ZERO TO 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>
Solution

  • If you want to create a responsive layout, for mobile devices, you should never use static min-width values, as there are many devices with different screen resolutions.

    To solve your issue just don't use the min-width property, rather just use width: 100% for the media query that you prefer, i.e.

    @media screen only and (max-width: 767px) {
  #Nav { width: 100%; }
}

    If you continue to use min-width for responsive layouts, you will always end up with a ugly scrollbar or unwanted widths of elements inside your website.