css - float : none in a media inquiry not functioning

Question

我无法得到图像来回应媒体询问。我知道查询路径有效，当我使用 display: none 属性时，图像消失了。

我想做的是在较小的屏幕尺寸下“取消 float ”图像，使其位于标题文本下方。

我无法让 float: none 属性在媒体查询中工作。

http://uploadpie.com/XRPSY

这是 HTML 中的图片

<header class="headercontainer">
    <img src="img/MR.jpg" class="profile-photo">
    <p>30 years experience in Metro-Detroit law</p>
    <h1>Marcia Ross</h1>
</header>

.headercontainer .profile-photo {
    /*display: block;  Will allow us to use auto margins to center the element*/
    max-width: 150px;
    margin: 0 25% 30px -150px;
    /* Here is from above, margin auto technique to center the image   the img is actually defaulted inline display */
    border-radius: 100%;
    float: right;
}
.headercontainer .profile-photo {
    /*display: block;  Will allow us to use auto margins to center the element*/
    max-width: 150px;
    margin: 0 25% 30px -150px;
    /* Here is from above, margin auto technique to center the image   the img is actually defaulted inline display */
    border-radius: 100%;
    float: right;
}
@media screen and (max-width: 943px) {
    .bragbanner {
        display: none;
    }
    .headercontainer img {
        float: none;
        display: inline-block;
        text-align: center;
    }
}

Answer 1

您的媒体查询选择器正在被上面的选择器覆盖

.headercontainer .profile-photo

您必须在媒体查询选择器中更加具体，例如:

.profile-photo