通过媒体查询更改div高度使背景消失

Question

你有一个带有h1文本的简单div，我试图为小型设备调整大小。

<div class="sectionTitle" > <h1> title </h1> </div>

无论我做什么来降低高度，总是让白色背景消失。

这是在自由墙中渲染后的 - http://vnjs.net/www/project/freewall/，但仍然指定了高度和宽度。文本仍然可见，只是背景消失。

任何线索如何降低div高度？

.sectionTitle
{
    background:         #fff;
    height:             60px;
}

.sectionTitle h1
{
    font-family:        'Lato', sans-serif;
    font-weight:        300;
    text-transform:     uppercase;
    padding:            22px 20px 0px 20px;
    font-size:          24px;
    word-wrap:          break-word;

}


@media all and (max-width: 768px) {
    .sectionTitle {
            height:             40px;
    }

        .sectionTitle h1{
            padding:            0px 0px 0px 0px;
            font-size:          10px;
            overflow:           hidden;
    }
}

Answer 1

尝试赋予width和float to class sectionTitle。

.sectionTitl
{
float:  left;
width:  100%;    
background:  #fff;
height:  60px;
}

希望这会对你有所帮助。