メディアクエリを使用してレスポンダーフッターを作成する方法

ロゴ、約、サービス、会社、連絡先の5つのフッタがあります。以下はhtmlコードです。メディアクエリを使用してレスポンダーフッターを作成する方法

<footer class="mainfooter"> 
    <div class="footerlogo"> 
     <i class="fa fa-fax fa-5x" aria-hidden="true"></i> 
    </div> 
    <div class="aboutbox">  
     <strong><p>ABOUT</p></strong> 
     <p style="color:#ffffe6">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero, dicta, nisi id ullam debitis, obcaecati modi magni culpa quasi blanditiis similique !</p> 
    </div> 
    <div class="services"> 
     <ul> 
      <li><strong><p>SERVICES</p></strong></li> 
      <li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> Financial</a></li> 
      <li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> Medical</a></li> 
      <li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> Insurance</a></li> 
     </ul> 
    </div> 
    <div class="company"> 
     <ul> 
      <li><strong><p>COMPANY</p></strong></li>  
      <li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> Home</a></li> 
      <li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> About</a></li> 
      <li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> Contact</a></li> 
     </ul> 
    </div> 
    <div class="contact">   
     <ul> 
      <li><strong><p>CONTACT</p></strong></li>     
      <li style="color:#ffffe6"><i class="fa fa-phone" aria-hidden="true"></i> +27 000 0004l</li> 
      <li style="color:#ffffe6"><i class="fa fa-envelope-o" aria-hidden="true"></i> [email protected]</li> 
      <li style="color:#ffffe6"><i class="fa fa-map-marker" aria-hidden="true"></i> 1 Street. Cape Town. 8000</li> 
     </ul> 
    </div> 
    <div class="clearfix"></div>   
</footer>

私はあなたが以下を参照してくださいすることができ試みにメディアクエリを使用しますが、それは

@media(max-width: 600px){ 
    .footerlogo, .about, .services, .contact, .company{ 
     display:block; 
     color:black; 
     padding:0px; 
     margin: 0px; 
    } 
}

どのように私はボックスが小さなデバイスでお互いの下に行くことができますか？動作しませんか。

出典

2016-05-27 Wosley Alarico

すでに互いの上に移動します。 ** float：leftまたはwidth：20％のように、指定しないでください。 'float：none;'と 'width：100％'を追加してみると、より近づくはずです。あなたが実際のデモを投稿すると、誰かが私のためにもっと – Djave

を助けることができるかもしれません。すべてのセクションはお互いの下にあります。 –

あなたは本当に正しいDjaveです。私はメディアクエリから浮動小数点を使用して、表示：ブロックは決して動作しませんでした。明らかに、幅を100％に変更します。ありがとう –

コードに問題はありません： aboutのクラス名が間違っています。 CSSではaboutboxである必要があります。メディアクエリの定義をこれに変更する@media only screen and (min-width: 600px)

これで問題は解決します。簡単にするために、私はフィディルドでdivの幅を50％に縮小しました。あなたはそれをそのまま維持することができます。さらに、ヘルプのための

、以下のフィドル https://jsfiddle.net/aalok/wjb3prmf/

出典

2016-05-27 08:31:18

実際それは動作します。 min-widthをmax-widthに変更するだけで、600px未満の幅を持つすべてのデバイスに対応できるようになりました。パディングと余白が0に設定されていてもボックスが正しく整列していないと不思議に思っています。スニペットから見ると、aboutボックスは、下の他のボックスと比較すると左に大きくなります。どうすればいいですか？ –

を経る私はyou'rコードをテストし、それが正常に動作します。しかし、あなたの「約」クラス名を詰めてください。 htmlにはclass="aboutbox"があり、CSSではclass="about"を使用しました。私は問題が別の場所にあると思います。あなたが投稿したコードは私にはうまく見えます。

出典

2016-05-27 08:34:15 Molarosa

!importantをあなたの物件の後ろに追加すると、その仕事をする可能性があります。このように。

@media(max-width: 600px){ 
    .footerlogo, .about, .services, .contact, .company{ 
     display:block !important; 
     color:black !important; 
     padding:0px !important; 
     margin: 0px !important; 
    } 
}

出典

2016-05-27 09:17:35 masJeffrey

メディアクエリを使用してレスポンダーフッターを作成する方法

答えて

関連する問題