通过媒体查询调整社交链接的大小

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 中的代码 - 观察到没有图像。 https://jsfiddle.net/AnnieWebDev/frrvmpnr/

感谢您的帮助:)

Answer 1

您是否尝试过设置 min-width: 70px !important;在 img 标签上。这样图像就不会比您在其中设置的值小。

Answer 2

您的代码中有几个错误。在此处输入您的代码并点击检查，然后修复错误。 html validator

将</link> 去掉<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"></link> 的末尾

<center> 已过时，请使用 css。在您的 css 样式表中，您可以添加 h1 { text-align: center;} 或内联 html 这样做 <h1 style="text-align:center;">Centered Heading</h1>

Answer 3

尝试在你的head 标签中添加这个：

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