媒体查询不适用于我的 Wordpress 主题的网站徽标答案

【问题标题】：Media Queries won't work for my Wordpress theme's site logo媒体查询不适用于我的 Wordpress 主题的网站徽标
【发布时间】：2018-04-14 06:53:34
【问题描述】：

我正在使用一个名为 Spacious 的 WordPress 主题。我已经设置了一个网站徽标，但我似乎无法使徽标响应。该徽标仅响应某些媒体查询，但不响应移动屏幕尺寸。

我将站点徽标的位置从标题下方的中心更改为左侧的标题上方。我认为这可能是问题，但我不确定。难道我做错了什么？我怎样才能让我的标志响应？我的网站的链接是：davenport.ryannemurphy.com。我用于徽标的 CSS 代码如下：

@media only screen and (max-width: 600px) {
.custom-logo {margin-top: 25px;
position: absolute;}

@media only screen and (max-width: 768px) {.header-image {height: 100px;}


.custom-logo {width: 50%;
margin-top: -20px;
}
}


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


.custom-logo {width: 50%;
position: relative;}
}

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

.custom-logo {width: 50%;
margin-top: -20px;
position: relative;
}


}


@media only screen and (max-width: 1500px){.custom-logo{margin-left: 100px;}}

@media only screen and (max-width: 1650px){.custom-logo {margin: 30px; }}

@media only screen (min-width: 1651px) and (max-width: 1850px){.custom-logo {width: 90%;}}


@media only screen and (max-width: 1950px){
.custom-logo {margin-left: -100px;
margin-top: -98px;
position: absolute;}
}

【问题讨论】：

你能显示你的 index.html 结构吗

标签： css wordpress media-queries media responsive

【解决方案1】：

我在 Sinatra 主题中遇到了同样的问题。我最终只使用了宽度和高度，但我必须在每个之后加上 !important。

这是我使用的css：

@media screen and (max-width: 960px) {
    img[itemprop="logo"] {
        width: 281px !important;
        height: 145px !important;
    }
}

【讨论】：

【解决方案2】：

您有一个硬编码到您的 html 中。我认为您需要删除 img 标签上的高度和宽度属性。

【讨论】：

【解决方案3】：

我相信您在附加的 CSS 的第 3 行中缺少右括号（“}”）。

使用在线 CSS 格式化程序（例如，https://www.cleancss.com/css-beautify/）来格式化您的 CSS 代码，您会发现由于缺少大括号，您的大多数媒体查询实际上都低于层次结构中的第一个。

不确定这是否会导致问题，但肯定会混淆浏览器并导致错误。

【讨论】：