0

I'm making a 960px template and I'm experiencing a problem when squeezing the browser window. The box-shadow on the right is gone whenever I make the window smaller than my elements min-width. Why is that happening?

HTML:

<!DOCTYPE html>
<html>
    <head>
        <?$APPLICATION->ShowHead();?>
        <title><?$APPLICATION->ShowTitle();?></title>
        <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div id="panel">
            <?$APPLICATION->ShowPanel();?>
        </div>
        <div class="container">
            <header>
                <div class="logotype">
                    <img src="<?=SITE_TEMPLATE_PATH?>/images/logotype.png">
                </div>
                <div class="login">
                    <a>Вход</a>
                </div>
                <div class="info">
                    <p>Уфа, Софьи Перовской 54</p>
                    <p>7 (347) 266-69-54</p>
                    <p>info@ufawell.ru</p>
                </div>
                <nav>
                    <ul>
                        <li>Home</li>
                        <li>Services</li>
                        <li>News</li>
                        <li>Contact</li>
                    </ul>
                </nav>
            </header>
<?
if(!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED !== true)
    die();
?>
            <footer>
                <div class="copyright">
                    <p>© «ИП Тухватуллин Р.Р.», 2015.</p>
                </div>
            </footer>
        </div> <!--.container-->
    </body>
</html>

CSS:

#panel {min-width: 960px;}

body {background: url(images/bg-2.jpg) no-repeat ; background-size: cover;}

.container {
    width: 960px;
    min-height: 800px;
    position: relative;
    margin: 10px auto;
    background-color: #f3f3f3;
    box-shadow: 3px 3px 8px #9c9c9c;
    -moz-box-shadow:    3px 3px 8px #9c9c9c;
    -webkit-box-shadow: 3px 3px 8px #9c9c9c;
    box-shadow:         3px 3px 8px #9c9c9c;
}

/*
header {height: 100px; padding: 10px; width: 940px;}

.logotype {width: 200px;}
.logotype img {padding: 0 0 10px 0;}

.login {width: 200px;}

.info{width: 200px;}

nav {background-color: #961c00; width: 940px;}

nav ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    height: 30px;
}

nav ul li {
    display: inline-block;
    width: 80px;
}

footer .copyright {padding: 5px; width: 950px; background-color: #c1c1c1; bottom: 0px; position: absolute;} 
*/
jcaron
  • 17,302
  • 6
  • 32
  • 46
Dor Soti
  • 1
  • Dor, Welcome to StackOverflow. Please add a working fiddle (http://jsbin.com/ or http://jsfiddle.net/) so we can help you. – Mosh Feu Aug 31 '15 at 08:01

1 Answers1

0

Its because box-shadow is not an actual object. Meaning that the width of .container is not calculated with the shadow width.

Add a small padding to your body. E.g padding: 5px; and the shadow will still be visible.

body {background: url(images/bg-2.jpg) no-repeat ; background-size: cover; padding: 5px;}

or add a media query that makes the container 100% of the viewport width minus the shadow.

@media only screen and (max-width: 800px){

    .container {
       width: calc(100vw - 10px);
       min-width: 0;
    }

}
Jacob
  • 1,933
  • 2
  • 20
  • 30