Zach Curtis Zach Curtis - 4 months ago 9
CSS Question

PNG images refuse to resize?

Completely stuck on this one... I've tried various arraignments of max-width and max-height, as well as auto values.

No idea what is holding me up. Here's the effected code:

<div class="copybar">
<ul>
<li id="copy-credit"><h3>Copyright 2016: </h3><a id="credit-animate" href="https://google.com">Zach Curtis</a></li>
<li id="social-icon"><a href="https://facebook.com"><img class="icon-img" src="images/iconfb.png"></a></li>
<li id="social-icon"><a href="https://instagram.com"><img class="icon-img" src="images/iconinsta.png"></imgc></a></li>
<li id="social-icon"><a href="https://twitter.com"><img class="icon-img" src="images/icontwit.png"></a></li>
</ul>
</div>


CSS:

.copybar {
background-color: darkslategray;
display: inline-block;


}

.copybar ul {
list-style: none;
margin-left:10%;
margin-right:10%;
}

#copy-credit {
display: block;
float: right;

}

#social-icon{
display: block;
float: left;
max-width: 25%;
height:auto;
}

.icon-image{
max-width:25%;
height: auto;
}

Answer

Your class is declared as icon-image in your CSS but referenced as icon-img in your HTML.