Question

我正在使用名为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;}
}

Answer 1

我相信您在附加的CSS第3行中错过了结束括号（＆＃34;}＆＃34;）。

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

不确定是否会导致此问题，但它肯定会让浏览器感到困惑并导致错误。

Answer 2

你有一个＆lt; img width =“450”height =“92”... /＆gt;硬编码到你的HTML。我认为你需要删除img标签上的高度和宽度属性。

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

2 个答案: