css - 媒体查询不适用于我的 Wordpress 主题的站点 Logo

Question

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

我将站点 Logo 的位置从标题下方的中心更改为左侧的标题上方。我认为这可能是问题所在，但我不确定。难道我做错了什么？我怎样才能使我的 Logo 具有响应性？我网站的链接是:davenport.ryannemurphy.com。我用于 Logo 的 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;}
}

Answer 1

我相信您在所附 CSS 的第 3 行中缺少右括号 ("}")。

使用在线 CSS 格式化程序(例如 https://www.cleancss.com/css-beautify/)格式化您的 CSS 代码，您会发现大部分媒体查询实际上都在层次结构中的第一个下方，因为缺少大括号。

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