resizing social links with media queries - html

Question

I am having some difficulties. I am developing a website and am having issues with the social link icons going tiny when the screen size is reduced. I'd like to use media queries to specify the size for smaller screens - what I am trying is not working.
Social links at top of page:
`<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>`
Social links in footer:
`
<!--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>`
Additionally, within the footer the height of <div class="footer-copyright">
increases when the screen size is reduced - anybody know why this is happening? I would also like to use media queries to fix this but it doesn't seem to work.
`<!--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>Treatments</p>
<p>Bookings</p>
<p>Shop</p>
</div>
<!--First column-->
<div class="col-md-3">
<h5 class="title">COMPANY</h5>
<p><a href=index.html>Home</a></p>
<p>Location</p>
<p>Contact</p>
<p>Privacy Policy</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>
jo#handson-therapy.com
</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-->`
Here is my code in JSFiddle - obvs no images present.
https://jsfiddle.net/AnnieWebDev/frrvmpnr/
Thanks for your help :)

Answer 1

have you tried to set min-width: 70px !important; on the img tag. This way the image will not go any smaller than the value which you set in there.

Answer 2

You have several errors in your code. Enter your code here and hit check and then fix the errors. html validator
Take </link> off the end of the <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"></link>
<center> is obscolete, use css. In your css style sheet you can add h1 {
text-align: center;} or inline html do it like this <h1 style="text-align:center;">Centered Heading</h1>

Answer 3

Try adding this in your head tag:
<meta name="viewport" content="width=device-width, initial-scale=1">