My website is displaying fine on all browsers except for iPhone. On the iPhone, the footer width appears shorter than it does on web browsers. Can anyone else confirm this issue?
Below is the code I am using:
<div class="footerWrapper">
<div class="footer">
<div class="footerNav">
<ul>
<li><a href="home.php">Home</a></li>
<li><a href="about.php">About Us</a></li>
<li><a href="gallery.php">Gallery</a></li>
<li><a href="services.php">Services</a></li>
<li><a href="contact.php">Contact Us</a></li>
</ul>
</div><!--footerNav-->
<div class="footerContact">
<ul>
<li>Email - <span style="text-transform:lowercase"><a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="46232b272f2a06282934322e352e2934232a2728223525273623202f342b682527">[email protected]</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="aacfc7cbc3c6eac4c5d8dec2d9c2c5d8cfc6cbc4ced9c9cbdacfccc3d8c784c9cb">[email protected]</a></a> | <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c2a7afa3abaef082acadb0b6aab1aaadb0a7aea3aca6b1a1a3b2a7a4abb0afeca1a3">[email protected]</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="26434b474f4a1466484954524e554e4954434a4748425545475643404f544b084547">[email protected]</a></a></span></li>
<li> | </li>
<li>PHONE - <a href="callto:+5555555555">555.555.5555</a> | <a href="callto:+5555555555">555.555.5555</a></li>
</ul>
</div><!--footerContact-->
Here's the CSS used for styling:
.footerWrapper{
width:100%;
background:#000;
float:left;
padding-bottom:20px;
}
.footerNav{
padding-top:10px;
margin: 0 auto;
position: relative;
width:1080px;
z-index:1000;
}
.footerNav ul {
list-style-type: none;
margin: 0;
padding: 0 0 0 8px;
}
.footerNav li {
float: left;
}
.footerNav ul a {
color: #FFFFFF;
display: block;
padding: 0 30px 0 0;
text-decoration: none;
font-size:36px;
text-transform:uppercase;
}
.footer{
margin: 0 auto;
position: relative;
width: 1101px;
background-color:#888888;
min-height:145px;
opacity:0.44;
filter:alpha(opacity=44);
}
.footerContact{
margin: 0 auto;
position: relative;
width: 1200px;
padding-top: 108px;
}
.footerContact ul {
list-style-type: none;
margin: 0;
padding: 0 0 0 8px;
}
.footerContact li {
float: left;
color: #FFFFFF;
display: block;
padding: 0 30px 0 0;
text-decoration: none;
font-size:20px;
text-transform:uppercase;
}
.footerContact Ul a{
text-decoration:none;
color:#FFFFFF;
}
The code might be lengthy, but any help provided would be highly appreciated.
Thank you in advance, J