iPad specific CSS Div issue - css

Question

I have an issue regarding a div we have on our test site, only when viewed on an iPad (or, I'm guessing, a screen that is tablet size)...
http://jmldirect.uat.venda.com
The Join Us (social icons) // Newsletter bar bleeds out of the main wrapper and I have no idea why.
Here is the HTML and relevant CSS:
HTML:
<div id="socialfooter">
<ul class="getSocial">
<li><a class="join-us">JOIN US</a></li>
<li><a class="foot-fb" href="https://www.facebook.com/JMLDirect" target="_blank" alt="JML on Facebook"></a></li>
<li><a class="foot-tw" href="https://twitter.com/JML_Direct" target="_blank" alt="JML on Twitter"></a></li>
<li><a class="foot-yt" href="http://www.youtube.com/user/JMLdirect" target="_blank" alt="JMl's YouTube Channel"></a></li>
</ul>
<ul class="newsletter">
<li><label for="emailsignup"><a class="join-us">SIGN UP TO OUR NEWSLETTER</a></label></li>
<li><form></form></li>
</ul>
</div>
CSS:
#socialfooter {
background: url("../images/social_icons/social_footer_wrapper_1010.png") no-repeat scroll 0 0 transparent;
clear: both;
display: block;
height: 55px;
margin: 0 auto;
width: 1010px;
}
#socialfooter ul.getSocial {
display: inline;
float: left;
list-style-type: none;
margin: 7px 0 0 46px;
width: 192px;
}
#socialfooter ul.newsletter {
display: inline;
float: right;
height: 38px;
list-style-type: none;
padding: 7px 11px 9px 0;
width: 564px;
}

Answer 1

You have set a width on the parent div:
#socialfooter{ width:1010px;}
and then floated the newsletter ul to the right of that div:
#socialfooter ul.newsletter{float:right; width:564px;}
The problem with this is that the iPad doesn't have the resolution to display such a wide div (#socialfooter).
If you want the content to show up, use percentage based widths like this:
#socialfooter {
background: url("../images/social_icons/social_footer_wrapper_1010.png") no-repeat scroll 0 0 transparent;
clear: both;
display: block;
height: 55px;
margin: 0 auto;
width: 100%;
}
#socialfooter ul.getSocial {
display:inline-block;
box-sizing: border-box;
float:left;
list-style-type:none;
margin:.5em 0 0 2em;
width:50%;
}
#socialfoter ul.newsletter {
display: inline-block;
box-sizing: border-box;
float:right;
vertical-align: middle;
list-style-type: none;
padding:0 2em 0 0;
width:50%;
}
EDIT:
#socialfooter {
background: url("../images/social_icons/social_footer_wrapper_1010.png") no-repeat scroll 0 0 transparent; //
^ This background is causing the issue. It is an image that is set to 1010px, so even CSS isn't going to help you there.
clear: both;
display: block;
height: 55px;
margin: 0 auto;
width: 100%;
}
#socialfooter ul.getSocial {
display:inline-block;
box-sizing: border-box;
float:left;
list-style-type:none;
margin:.5em 0 0 2em;
width:30%;
}
^ Changed the width to accommodate the large input field on the right side
#socialfoter ul.newsletter {
display: inline-block;
box-sizing: border-box;
float:right;
vertical-align: middle;
list-style-type: none;
padding:0 2em 0 0;
width:70%;
}
^ And gave this right side more width to make room for your input.

Answer 2

ANSWER:
1. Markup:
<div class=“socialfooter”>
<ul class="getSocial">
<li><a class="join-us">JOIN US</a></li>
<li><a class="foot-fb" href="https://www.facebook.com/JMLDirect" target="_blank" alt="JML on Facebook"></a></li>
<li><a class="foot-tw" href="https://twitter.com/JML_Direct" target="_blank" alt="JML on Twitter"></a></li>
<li><a class="foot-yt" href="http://www.youtube.com/user/JMLdirect" target="_blank" alt="JMl's YouTube Channel"></a></li>
<li><a class="foot-pin" href="http://www.pinterest.com/JMLdirect" target="_blank" alt="JMl on Pinterest"></a></li>
</ul>
<ul class="cards">
<li><a class="mastercard"></a></li>
<li><a class="visa"></a></li>
<li><a class="maestro"></a></li>
<li><a class="visaElectron"></a></li>
<li><a class="Paypal"></a></li>
</ul>
</div>
2. CSS:
.socialfooter {
height:55px;
width:100%;
background:url("../images/social_icons/social_footer_wrapper_1010.png") repeat-y 50% 0 transparent;
clear:both;
position:relative;
}
.socialfooter ul.getSocial {
display:inline-block;
box-sizing: border-box;
float:left;
list-style-type:none;
margin:.5em 0 0 -38em;
width:30%;
position:absolute;
}
.getSocial li {
position:relative;
float:left;
}
.socialfooter ul.cards {
display: inline-block;
float: right;
list-style-type: none;
margin: 1.35em 0 0 13em;
position: absolute;
width: 30%;
}
.socialfooter li {
display: inline-block;
list-style-type: none;
background:none;
}
.cards li {
float:left;
padding:0 7px;
}
.cards li a {
background: url("../images/social_icons/elements.png") no-repeat transparent;
}
.cards li a.mastercard {
background-position: -15px -385px;
display: block;
height: 24px;
margin-left: 5px;
width: 38px;
}
.cards li a.visa {
background-position: -58px -386px;
display: block;
height: 24px;
margin-left: 5px;
width: 38px;
}
.cards li a.maestro {
background-position: -102px -385px;
display: block;
height: 24px;
margin-left: 5px;
width: 38px;
}
.cards li a.visaElectron {
background-position: -145px -385px;
display: block;
height: 24px;
margin-left: 5px;
width: 38px;
}
.cards li a.Paypal {
background-position: -189px -385px;
display: block;
height: 24px;
margin-left: 5px;
width: 38px;
}