Foundation 6 resize and centering issues - html

Question

Hello Im having problems with foundation 6. In my footer there is a social list with 4 icons(phone, email, twitter, facebook) I cant get them to stay centered on resize. On my PC it seems fine, however, uploaded onto the web and viewed on my phone(nexus 6) the icons are off center to the left. here is my footer code
<footer>
<!--social icons should be centered -->
<div class="row">
<div class="large-3 medium-centered columns">
<ul class="menu social">
<li>
<a href="http://www.twitter.com">
<i class="fi-social-twitter"></i>
</a>
</li>
<li>
<a href="http://www.facebook.com">
<i class="fi-social-facebook"></i>
</a>
</li>
<li>
<a href="tel:[phone] ;="">
<i class="fi-telephone"></i></a>
</li>
<li>
<a href="mailto:info#example.com">
<i class="fi-mail"></i>
</a>
</li>
</ul>
</div>
</div>
<p class="text-center copyright"> All Rights Reserved Final FInal 2016.</p>
</footer>
The site is www.gastromob.com. I could really use some suggestions on how to improve this site. I'm having several problems, but I'd like to fix this one first, thanks.

Answer 1

The class medium-centered that you use is meant to center a column within a row; it does not center the text inside that column.
Foundation 6 recommends using the <div class="menu-centered"> wrapper around the <ul class="menu">. If you're using Flexbox, you don't need the wrapper and can add the .align-center class to the ul element instead. Please click here for more information.
Using the row and column wrapper seems unnecessary here.
You could write your code this way to achieve what you need:
<footer>
<div class="menu-centered">
<ul class="menu">
<li>
<a href="http://www.twitter.com">
<i class="fi-social-twitter"></i>
</a>
</li>
<li>
<a href="http://www.facebook.com">
<i class="fi-social-facebook"></i>
</a>
</li>
<li>
<a href="tel:[phone]">
<i class="fi-telephone"></i>
</a>
</li>
<li>
<a href="mailto:info#example.com">
<i class="fi-mail"></i>
</a>
</li>
</ul>
</div>
<p class="text-center copyright"> All Rights Reserved Final FInal 2016.</p>
</footer>
By the way, href="tel:[phone] ;="" is incorrect and should be href="tel:[phone]" instead.
I've also looked at your site, and noticed that you set a fixed height for the element <div id="overlay">. As a result, when viewing the site on a small device, this overlay spills over and covers the elements below it. You should simply remove the fixed height to solve this problem.
The boat logo also obstructs the view when shrinking the size of the screen. You may want to make it responsive as well.
Other than that, all the other elements are responsive and look good!