調整與媒體查詢的社交鏈接的大小

Question

我遇到了一些困難。我正在開發一個網站，並且在縮小屏幕尺寸時遇到了社交鏈接圖標變小的問題。我想使用媒體查詢來指定較小屏幕的大小 - 我所嘗試的是不工作。在頁腳

`<div class="container"> 
    <div class="row-1"> 
     <!--First column--> 
     <div class="col-sm-3"> 
      <img src="images/fbGrey.png" class="img-responsive" 
style="width:50px" alt="Find us on Facebook"> 
       <hr class="vertical"/> 

     </div> 
<!--Second column--> 
<div class="col-sm-3"> 
    <img src="images/twitterGrey.png" class="img-responsive" 
style="width:50px" alt="Follow us on Twitter"> 
     <hr class="vertical"/> 

     </div> 
<!--Third column--> 
<div class="col-sm-3"> 
    <img src="images/instagramGrey.png" class="img-responsive" 
style="width:50px" alt="Follow us on Instagram"> 
     <hr class="vertical"/> 

     </div> 
<!--Fourth column--> 
<div class="col-sm-3"> 
    <img src="images/pinterestGrey.png" class="img-responsive" 
style="width:50px" alt="Follow us on Pinterest"> 
     <hr class="vertical"/> 
     </div> 
    </div> 
</div>` 

社會鏈接：

在頁面頂部社會鏈接 `

 <!--First column--> 
     <div class="col-md-3"> 
<!--Social buttons--> 
     <!--First column--> 
    <div class="container"> 
     <div class="row-3"> 
     <div class="col-sm-3"> 
      <img src="images/fbGrey.png" class="img-responsive" 
style="width:70px" alt="Find us on Facebook" id="fb"> 
    <img src="images/twitterGrey.png" class="img-responsive" 
style="width:70px" alt="Follow us on Twitter"> 

    <img src="images/instagramGrey.png" class="img-responsive" 
style="width:70px" alt="Follow us on Instagram"> 

    <img src="images/pinterestGrey.png" class="img-responsive" 
style="width:70px" alt="Follow us on Pinterest"> 

    </div> 
</div> 
</div>` 

此外，頁腳中時，屏幕的尺寸則縮小的<div class="footer-copyright"> 增加高度 - 有人知道爲什麼會發生這種情況嗎？我也想使用媒體查詢來解決這個問題，但似乎並不奏效。

`<!--footer--> 
    <div class="span4"> 
    <!-- empty, but using spacer to prevent collapse --> 
    <div class="spacer10"></div> 
    </div>   </div> 

     <!--Second column--> 
     <div class="col-md-3"> 
      <h5 class="title">OUR SERVICES</h5> 
       <p><a href="treatments.html">Treatments</a></p> 
       <p><a href="bookings.html">Bookings</a></p> 
       <p><a href="shop.html">Shop</a></p> 
      </div> 

     <!--First column--> 
     <div class="col-md-3"> 
      <h5 class="title">COMPANY</h5> 
       <p><a href=index.html>Home</a></p> 
       <p><a href="contact.html">Location</a></p> 
       <p><a href="contact.html">Contact</a></p> 
       <p><a href="privacypolicy.html">Privacy Policy</a></p> 

     </div> 
      <!--Second column--> 
     <div class="col-md-3"> 
      <h5 class="title">CONTACT</h5> 
       <strong>Hands on Sports & Holistic Therapy</strong><br> 
       50 Westonfields<br> 
       Bridgetown<br> 
       Totnes<br> 
       TQ90 5QX<br> 
       <abbr title="Phone">P: 07450232531</abbr><br><br> 
      </address> 

      <address> 
       <strong>Email: </strong><br> 
       <a href="mailto:#">jo@handson-therapy.com</a> 
      </address> 
     </div> 
    </div> 
</div> 

<hr> 
<!--Copyright--> 
<div class="container"> 
<div class="row-5"> 
    <div class="col-sm-12"> 
     <div class="footer-copyright"> 
      <div class="container-fluid"> 
       <center>© 2017 Copyright: Hands on Sports & Holistic 
Therapy. All rights reserved.</center> 
      </div> 
     </div> 
    </div> 
</div> 
<div class="span4"> 
    <!-- empty, but using spacer to prevent collapse --> 
    <div class="spacer40"></div> 
    </div> 

</footer> 
<!--/.Footer-->` 

這是我在JSFiddle中的代碼 - obvs沒有圖像存在。 https://jsfiddle.net/AnnieWebDev/frrvmpnr/

感謝您的幫助:)

Answer 1

你試圖設置最小寬度：70像素重要;在img標籤上。這樣圖像不會比你在那裏設置的值小。

Answer 2

嘗試在head標籤添加此：

<meta name="viewport" content="width=device-width, initial-scale=1"> 

Answer 3

你的代碼有幾個錯誤。在這裏輸入您的代碼並點擊查看，然後修復錯誤。 html validator

取</link>關閉的<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"></link>

<center>到底是obscolete，使用CSS。在你的CSS樣式表中，你可以添加h1 { text-align: center;}或內聯html這樣做<h1 style="text-align:center;">Centered Heading</h1>