移动网站导航＆amp;徽标div重叠

Question

所以我试图让这个网站移动友好：coveartschildcare.com和所有标题div重叠，我尝试过的任何东西似乎都在工作。这是我正在使用的CSS：

@media only screen 

和（min-device-width：320px）   和（max-device-width：568px）   和（-webkit-min-device-pixel-ratio：2）{

div#logo
    {
        float: left;
    }

div#logo h1
    {
        font-size: 0.5em;
        color: #777;
    }

div#logo span
    {
        font-size: 1.4em;
        color: #FFF;
    }

div#header
    {

        background: url(../images/mobile-bg.jpg) no-repeat bottom center;
        text-align: center;
        float: left;
    }


div#nav 
    {
        z-index : 1;
        float: left;
        position: relative !important;
    }

.container
    {
        float: left;
    }

    .clear {
        clear: both;
    }

}

我尝试过相对位置，绝对位置，左侧浮动位置或者没有位置，自动宽度和位置。高度，没有任何作用。任何帮助将不胜感激。

Answer 1

好的，你要问的是让你的页面上的div标签更小，以便它们不重叠？

这样做会创建一个像这样的新规则：

@media (max-width: 520px) {
    div {
        width: 50px;
    }
    body {
        color: blue;
    }
}

max-width是浏览器激活它的最大宽度。 您可以创建两个@media规则并将第二个@media规则的max-width更改为等于不同的数字。如果宽度小于最大宽度，浏览器将激活规则。当屏幕尺寸小于两个@media规则时，它将运行较小的

希望这会有所帮助...

Answer 2

我认为，如果你把这个位置删除：绝对;在＃nav-wrapper {}上，它不再重叠。