IPad конкретного CSS Div вопрос

Question

У меня есть вопрос относительно в DIV мы имеем на нашем тестовом сайте, только если смотреть на IPad (или, я предполагаю, что, экран, которого размер таблетки) ...

http://jmldirect.uat.venda.com

Социальные иконки // Информационный бюллетень выходит из основной обертки, и я понятия не имею, почему.

Вот HTML и соответствующий 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

ОТВЕТ:

1. Разметка:

<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; 
} 

Answer 2

Вы установили ширину на родительском DIV:

#socialfooter{ width:1010px;} 

, а затем плавал бюллетень ул справа от этого DIV:

#socialfooter ul.newsletter{float:right; width:564px;} 

Проблема с этим состоит в том, что IPad не имеет разрешения для отображения такой широкий DIV (#socialfooter).

Если вы хотите, чтобы содержание, чтобы показать, использовать ширину на основе процента, как это:

#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; // 

^На этом фоне вызывает проблемы. Это образ, который установлен в 1010px, поэтому даже CSS не поможет вам.

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%; 
} 

^Изменена шириной для размещения большого поля ввода на правой стороне

#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%; 
} 

^И дал эту правой сторона больше ширины, чтобы освободить место для вашего входного сигнала.