ウェブサイトの.PNGロゴは、モバイル/レスポンスビューでは中心から外れていますが、デスクトップブラウザビューでのみOKです。

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; 
    } 
}