웹 사이트의 .PNG 로고가 모바일/응답보기에서는 중심에 있지 않지만 데스크톱 브라우저보기에서만 확인 가능

Question

Here's the website in question입니다. 데스크톱 브라우저에서 사이트를 볼 경우 (Chrome, Firefox, Edge를 사용해 보았습니다.) 정상적으로 보입니다. 그러나 모바일 장치에서 볼 때 상단 로고가 중심을 벗어나 잘못된 위치에 표시됩니다. screenshot.

여기 내 index.html 파일에서 코드의 해당 줄의 :

<header id="header"> 
    <div class="logo"> 
     <span class="imagetop"><img src="images/TTM-Logo3.png" alt="" /></span> 
    </div> 

는 그리고 여기 내 .css 파일의 코드가있다 :

.imagetop { 
     position: relative; 
     transform: translate(-50%, -50%); 

며칠 전 나는 내가 가진 생각 이 고정,하지만 불행히도 그것은 나를 돌아 오기 위해 돌아 왔습니다. 나는 이전 버전의 사이트로 롤백을 시도했지만 여전히 동일한 문제가 발생했습니다.

데스크톱 및 모바일보기에서 상단에 로고를 올바르게 배치하기 위해 할 수있는 것에 대한 의견이 있으십니까?

Answer 1

반응 형 width 및 height이 기본 스타일 (736px 이하)을 덮어 쓰고 있기 때문입니다. 코드를 재설정하면 정상으로 되돌려 야합니다. 설정할 내용은 다음과 같습니다.

@media screen and (max-width: 736px) { 
    #header .logo { 
     width: 100%; 
     height: auto; 
     line-height: initial; 
    } 
}