ファウンデーション6サイズ変更とセンタリングの問題

Question

こんにちは、私のフッタには4つのアイコン（電話、電子メール、Twitter、Facebook）のソーシャルリストがあります。サイズ変更を中心にしておくことはできません。しかし、私のPC上では、ウェブ上にアップロードされ、自分の電話（ネクサス6）で表示されているアイコンは左の中央に表示されません。ここに私のフッタコード

<footer> 
    <!--social icons should be centered --> 
    <div class="row">   
     <div class="large-3 medium-centered columns"> 
      <ul class="menu social"> 
       <li> 
        <a href="http://www.twitter.com"> 
         <i class="fi-social-twitter"></i> 
        </a> 
       </li> 
       <li> 
        <a href="http://www.facebook.com"> 
         <i class="fi-social-facebook"></i> 
        </a> 
       </li> 
       <li> 
        <a href="tel:12345678901 ;=""> 
         <i class="fi-telephone"></i></a> 
       </li> 
       <li> 
        <a href="mailto:info@example.com"> 
         <i class="fi-mail"></i> 
        </a> 
       </li>  
      </ul> 
     </div> 
    </div>   
    <p class="text-center copyright"> All Rights Reserved Final FInal 2016.</p> 
</footer> 

サイトはwww.gastromob.comです。私は本当にこのサイトを改善する方法に関するいくつかの提案を使用することができます。私はいくつかの問題を抱えていますが、最初にこの問題を修正したいと思います。

Answer 1

クラスmedium-centeredは、行内の列を中央揃えにすることを目的としています。その列の中にテキストを中央に配置しません。

ファンデーション6は、<ul class="menu">の周りに<div class="menu-centered">ラッパーを使用することをお勧めします。 Flexboxを使用している場合、ラッパーは不要で、.align-centerクラスをul要素に追加できます。詳細はhereをクリックしてください。

ここではrowとcolumnラッパーの使用は不要です。

あなたはあなたのコードに必要なものを達成するには、このように記述することができます。

<footer> 
    <div class="menu-centered"> 
    <ul class="menu"> 
     <li> 
     <a href="http://www.twitter.com"> 
      <i class="fi-social-twitter"></i> 
     </a> 
     </li> 
     <li> 
     <a href="http://www.facebook.com"> 
      <i class="fi-social-facebook"></i> 
     </a> 
     </li> 
     <li> 
     <a href="tel:12345678901"> 
      <i class="fi-telephone"></i> 
     </a> 
     </li> 
     <li> 
     <a href="mailto:info@example.com"> 
      <i class="fi-mail"></i> 
     </a> 
     </li> 
    </ul> 
    </div> 
    <p class="text-center copyright"> All Rights Reserved Final FInal 2016.</p> 
</footer> 

ところで、href="tel:12345678901 ;=""が間違っているし、代わりにhref="tel:1234567890"でなければなりません。

私もあなたのサイトを見て、要素<div id="overlay">の固定高さを設定していることに気付きました。その結果、小さなデバイス上でサイトを見るときに、このオーバーレイがその下にある要素を覆って覆います。この問題を解決するには、単に固定高さを削除するだけです。

ボートのロゴは、画面のサイズを縮小するときにも表示を妨げます。あなたはそれを反応させることもできます。

それ以外は、他のすべての要素が反応して、よく見えます！