响应式CSS不起作用

Question

对于本网站：http://www.valleylawyermarketing.com/

当您调整此页面的大小时，“推荐”图片下的文字应该浮动：左边，但不是。我不明白为什么。

非移动网站上的CSS：

.testimonial_box {
    background-color: #fff;
    color: #000;
    float: right;
    padding: 30px 15px;
    width: 71%;
}

移动网站的CSS（不工作）

.testimonial_box {
    background-color: #fff;
    color: #000;
    float: left;
    padding: 30px 15px;
    width: 80%;
    margin-top: 10px;
}  

HTML：

<div class="testimonial_box">
</div>

Answer 1

在特定媒体查询中使用移动css

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
.testimonial_box {
    background-color: #fff;
    color: #000;
    float: left;
    padding: 30px 15px;
    width: 80%;
    margin-top: 10px;
}  
}

css.css文件中有一些无效字符

@media only screen and (max-width: 800px) { 
    #portfolio-items .portfolio-grid li {
        width: 240px;
        height: auto;
    }
.testimonial_box {
    background-color: #fff;
    color: #000;
    float: left;
    padding: 30px 15px;
    width: 80%;
    margin-top: 10px;
}  
}

Answer 2

您的移动CSS中每行前面都有一些奇怪的字符。摆脱那些。

当我查看chrome中的css.css文件时，这就是它的样子：

.testimonial_box {
    background-color: #fff;
    color: #000;
    float: left;
    padding: 30px 15px;
    width: 80%;
    margin-top: 10px;
}  

Answer 3

在移动广告管理系统中，在必要时使用!important，如下所示

.testimonial_box {
    background-color: #fff;
    color: #000;
    float: left !important;
    padding: 30px 15px;
    width: 80% !important;
    margin-top: 10px;
}