1

ウェブサイトへのリンク: foxweb.marist.edu/users/kf79g/contact.php

これです。Web サイトをデプロイして最終的に完成させる前に修正しなければならない最後のステップです。しかし、この問題を解決する方法がわかりません。中型および小型の画面では、ソーシャル アイコンに多くの問題があります。中型および小型のデバイスですべてを中央に配置し、100% 応答性を高めたいと考えています。コンテナーを作成してレスポンシブにしようとしましたが、何をしても、IE 7-10 では常に乱雑に見えます。ページの幅がどんどん狭くなるにつれて、アイコンは 1 行に均等にとどまるのではなく、次の行に移動します。余白を調整しようとしましたが、ページ全体の中心属性が台無しになってしまったので、役に立ちませんでした。何をすべきか、この問題を解決する方法がわかりません。誰かが私を助けることができれば、本当に感謝しています。

問題の視覚的表現 (IE):

http://tinypic.com/r/nla7eq/5

私はそれをどのように見せたいですか（最新のブラウザ）：

http://tinypic.com/view.php?pic=vp9gg7&s=5

HTML:

<h2> Social networks </h2><br/>

                        <div id = "center_icons">
                            <a href="https://www.facebook.com/lenny.pfautsch" target="_blank"><img src="images/facebook.png" alt="facebook" style="margin:1px;"></a> 

                            <a href="https://plus.google.com/113122168458946246215/posts" target="_blank"><img src="images/google-plus.png" alt="google plus" style="margin:1px;"></a>

                            <a href="http://www.linkedin.com/pub/leonard-pfautsch/53/b34/1a2" target="_blank"><img src="images/linkedin.png" alt="linkedin" style="margin:1px;"></a>

                            <a href="https://github.com/LeonardPfautsch" target="_blank"><img src="images/github.png" alt="github" style="margin:1px;"></a>
                        </div>
                    <br/>

                    </div>

            </section>      


Main CSS:   

    #details_section {
        max-width:100%;
        float:left;
        margin-right:20px;
    }


Large screens:    

    #details_section {
        width:320px;
    }




Medium screens:    

    #center{
    width: 450px;
      display: block;
      margin-left: auto;
      margin-right: auto;
    }

    #center_icons{
    width: 213px; /*this value is changing for IE and chrome*/
      display: block;
      margin-left: auto;
      margin-right: auto;
    }



Small screens:    

    #center{
    width: 220px;
      display: block;
      margin-left: auto;
      margin-right: auto;
      max-width:100%;
    }

    #center_icons{
    width: 214px; /*this value is changing for IE and chrome*/
      display: block;
      margin-left: auto;
      margin-right: auto;
      max-width:100%;
    }
4

3 に答える 3