내 Wordpress 테마의 사이트 로고에 대한 미디어 쿼리가 작동하지 않습니다.

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에서 닫는 대괄호 ("}")이 누락 생각합니다.

CSS 코드의 형식을 지정하기 위해 온라인 CSS 포맷터 (예 : https://www.cleancss.com/css-beautify/)를 사용하면 중괄호가 없기 때문에 대부분의 미디어 쿼리가 실제로 계층 구조의 첫 번째 태그 아래에 있음을 알 수 있습니다.

이 문제를 일으키는 지 확실하지 않지만 브라우저를 혼동하여 버그를 유발할 수 있습니다.

Answer 2

귀하는 귀하의 html에 < img width = "450"height = "92"... /> 하드 코드되어 있습니다. img 태그의 height 및 width 속성을 제거해야한다고 생각합니다.