fix the alignment of contents of <div> - html

Question

I am trying to add a div for social network widgets to the end of the footer on my website.The code works out on my desktop,but the contents alignment is changed when I test it on ipad,iphone and windows phone.Here is the code:
<div style="background-color: #1E2629;">
<div class="container">
<div class="row text-center">
<div>
<ul class="list-inline">
<li>
<div class="fb-like" style="overflow:hidden;" data-href="https://www.facebook.com/WebsitePage" data-layout="button" data-action="like" data-show-faces="true" data-share="false"></div>
</li>
<li>
<div>
Follow #CardInbox
<script>!function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https'; if (!d.getElementById(id)) { js = d.createElement(s); js.id = id; js.src = p + '://platform.twitter.com/widgets.js'; fjs.parentNode.insertBefore(js, fjs); } }(document, 'script', 'twitter-wjs');</script>
</div>
</li>
<li>
<div>
<script src="//platform.linkedin.com/in.js" type="text/javascript"> lang: en_US</script>
<script type="IN/FollowCompany" data-id="111111">
</script>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>

Answer 1

Add media queries for each device screen size,
/* Ipad Portrait and Landscape */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
/* your css code
.container {} */
}
/* iPhone 4/4s Portrait and Landscape */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
/* your css code
.container {} */
}
/*5/5S */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) {
}
Windows phones comes in different screen size. So configure accordingly .