问题
How to align properly center the social footer and footer menu? I tried to align the social footer in three lines, in the 1st line is the icons and the 2nd and 3rd lines are the text at the bottom. But when I re-size the screen the icons are misbehave.
While the footer menu, I want to displayed on one line only. I want to remain the design of footer to all mobile devices no matter what screen size they are.
Here's the link: http://mobiletest.me/google_nexus_6/2507045 and jsfiddle
Here's the CSS for media queries
.hcsocialslitwitter, .hcsocialslifb, .hcsocialslilinked, .hcsocialslics, .hcsocialslic{ margin: 0 !important; width: 30%; }
.hcsocials{ margin: 0; padding: 0; }
.hcsocialspfb{ margin: 1px 0 19px -90px !important; }
.hcsocialspcollections, .hcsocialspcustomer, .hcsocialsptwitter, .hcsocialsplinked{ margin: 1px 0 19px -80px !important; }
.bottom-menu{ float: none; margin: -20px 100px 5px auto; }
.copyrighttext{ margin: -45px 0 0 170px; float: left; }
.footerimg{ margin: 10px 0 0 70px; }
.footer #middle-footer{ padding: 20px 0 10px 0; }
回答1:
Using media queries should fix it.
@media only screen and (max-width: 500px) {
if you don't know how check out http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
来源：https://stackoverflow.com/questions/33273019/how-to-align-properly-center-the-social-footer-and-footer-menu