Wordpressのロゴ設定を反応的な方法で変更してください

Question

私は初心者ですが、これは私の最初のウェブサイトですが、私のウェブサイトのロゴを変更しようとしています。私はそれをより大きく中央にしたいと思っています。私はデスクトップビューからこれを達成することができますが、モバイルでは機能しません。

簡単に言えば、ロゴはデスクトップ、スマートフォンの両方でかなり小さく見えます。だから私は、カスタムCSS（ウェブ上で発見...）にこのコードを追加します。これにより

.logo.logo1 { 
    width:100%; 
    text-align:center; 
    margin-bottom:20px; 

} 

.logo.logo1 { 
    width: 400px; 
    height: 100px; 
} 

.logo.logo1 { 
    position: relative; 
    top: 40px; 
    right: 130px; 
} 

を所定の位置に、私のデスクトップ上にロゴが良さそうに見えますが、私のスマートフォンで、それは小さく、あまりにも遠くへ行きます画面の左にあり、部分的に消えています。

私は現在、コーディングに近づいているため、潜在的なロゴのコンテナに依存しているのか、スマートフォンで反応させるのかはわかりません。真実は私がより多くの研究をするほど、私は混乱するほどです。

この問題を解決する方法については、お気軽にお問い合わせください。

P.S.ウェブサイトは、あなたがモバイルビューのためのメディアセクションでCSSを変更する必要がありthis one

ジオ

Answer 1

これをCSSの下に追加してください。

@media (max-width: 767px){ 
    .logo.logo1{ 
    max-width: 100%; 
    width: 100%; 
    position: static; 
    top: 0; 
    right: 0; 
    height: auto; 
    } 
} 

基本的には、どのようなここで起こっていることは、あなたのテーマは、小型デバイス上のそれは小さな作ること適用されるスタイルの束をオーバーライドしていることです。

Answer 2

です。以下のような用途代：あなたがモバイルビューを使用することができます：あなたが行でスタイルmb.cssファイルを変更し、ロゴのサイズ

ノートを変更する必要があり、この問題で特別な

@media (max-width: 767px){ 
/* 
your css tags 
*/ 
} 

あなたのブラウザで、デベロッパーツールのデスクトップブラウザでモバイルビューをテストする