Visit my website here: foxweb.marist.edu/users/kf79g/contact.php
I'm stuck on the final step needed to deploy my website and finish it. The issue I'm facing is with the social icons when viewed on medium and small screens. I want them to be centered and fully responsive across all devices. I've tried creating a container to make them responsive, but they appear messy in IE 7-10. As the page width decreases, the icons start moving to the next line instead of staying aligned. I attempted adjusting margins, but it messed up the centering alignment for the entire page. I'm at a loss on how to fix this problem. Any help would be greatly appreciated.
View the visual representation of the issue in IE here.
Here's how I want it to look like in modern browsers: here.
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%;
}