レスポンシブウェブデザイン - 正しいメディアクエリーを追加

私はwordpressでウェブサイトを開発しました。そのデザインはデスクトップとタブレットには問題ありませんが、携帯電話のビジュアライゼーションには良いデザインを設定する際に問題があります。メディアクエリを追加しようとしていますが、必要に応じて要素を制御することができません。具体的には（私はIphone5でテストしています）、ナビゲーションバーは縦画面でフルスクリーンをカバーしていません。画像は中央に配置されておらず、テキストの余白は間違っています... ホームページ：レスポンシブウェブデザイン - 正しいメディアクエリーを追加

ここ

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=content-width, initial-scale=1.0"> 
<style> 
    #logo { 
    display: none; 
    } 

    div img { 
    display: inline; 
    } 

    div footer-area { 
    display: none; 
    } 

@media only screen and (max-width: 320px) { 
    img { 
     float: center; 
    } 

    div p { 
    margin: 0; 
    padding: 15px; 
    width: 100%; 
    } 
} 
</style> 

<img style="margin: -76px auto -55px auto; max-width: 450px;" src="http://localhost/wp/wp-content/uploads/2017/09/logo.png" alt="" width="1800" height="903" class="aligncenter size-full wp-image-461" /> 
</head> 
<body> 
<div>[smartslider3 slider=4]</div> 
<p style=" margin:70px 160px 0 160px;"><strong>Dottore Commercialista e Revisore Legale con sede a Verona</strong>, Alberto Nesso offre ai propri clienti una vasta gamma di prestazioni professionali di livello qualitativamente elevato entro un prezzo medio di mercato. L'attività di consulenza ordinaria contabile e fiscale, integrata all'occorrenza da servizi di assistenza amministrativa e aziendale-societaria, si rivolge ad imprese individuali, società di persone e capitali, enti no profit. Prestando attenzione alle esigenze di ciascun cliente, vengono fornite le informazioni specifiche, per massimizzare i risultati e le risoluzioni dei problemi, nella massima trasparenza e attraverso procedure giuridiche e fiscali coerenti con la strategia aziendale.</p> 
<div style="margin: 30px 50px; " align="center"><a href="http://www.albertonesso.it/profilo/" target="_blank"><img style="padding-right: 10px; width: 240px;" src="http://www.albertonesso.it/wp-content/uploads/2017/09/HOME-profilo2.png" /></a><a href="http://www.albertonesso.it/competenze/" target="_blank"><img style="padding-right: 5px; padding-left: 5px; width: 240px;" src="http://www.albertonesso.it/wp-content/uploads/2017/09/HOME-competenze2.png" /></a><a href="http://www.albertonesso.it/contatti/"target="_blank"><img style="padding-left: 10px; width: 240px;" src="http://www.albertonesso.it/wp-content/uploads/2017/09/HOME-contatti2.png" /></a></div> 
</body> 
</html>

ウェブサイトのアドレス：https://www.albertonesso.it

あなたがこの問題を解決するために私を助けていただけますか？ありがとうございます！

出典

2017-11-06 Guy Debord

Chromeでは、ホームページ上の問題は、ナビゲーションバーが共有バーの後ろに消えているように見えます。私にとっては、ブラウザでは、このコードは、それが修正されています。

@media (max-width: 960px) { 
    .site-navigation-inner { 
     margin-top: 40px; 
    } 
}

また、上で見たとき、それはテキストの狭すぎる列を作成するようにいくつかのJavaScriptは、あなたのコンテンツのテキストにマージンを設定している不幸な効果を持っています電話。

可能であれば、私はそのJavaScriptを削除し、CSSで余白を設定することをお勧めします。あなたはJSを削除することができない場合、あなたはこのようなものでそれをオーバーライドすることができます：画像のために

@media (max-width: 768px) { 
    .entry-content p { 
     margin: 0 40px !important; 
    } 
}

、あなたが追加することができます：

img.size-full { 
     width: 100%; 
    }

か、この効果は、他の場合を望ましくない方法で画像：

img.wp-image-461 { 
     width: 100%; 
    }

は、現在のロゴ画像のみを対象とします。

出典

2017-11-06 16:01:21 vlasits

ヒントをお寄せいただきありがとうございます。このナビゲーションバーの問題は、私にとっても修正されています。テキストや画像の提案はありますか？ –

確か...私が追加したマージンの修正を除いて、私は本当に他の問題は見当たりません。どのようにイメージを違うものにしたいですか？また、最初のメディアクエリの幅を変更しました。 – vlasits

クール、コードありがとうございます。正しく表示されないロゴ画像があります。画面が縦向きで590pxよりも小さい場合は、画面の右側に表示されます...携帯から見ますか？ –

レスポンシブウェブデザイン - 正しいメディアクエリーを追加

答えて

関連する問題