반응 형 페이지가 작동하지 않습니다.

Question

저는 http://pizzli.com/paystream/landing-page/에서 일하고 있으며 반응 형 페이지를 만들기 위해 노력하고 있습니다. 내 휴대 전화에서 페이지를 보면 폼이 잘립니다. 내 코드는 다음과 같습니다 :

<div class="container" > 
     <h2 class="section-title" style="float:left;"><?php the_title();?></h2> 
     <br> 
     <div style="clear:both"></div> 
     <div class="interior-inner"> 
      <div style="float:left;width:800px;"> 
       <?php the_content();?> 
      </div> 
      <div style="float:right;width:450px;"> 
       <div id="form"> 
        <div id="forminner"> 
         <div id="formtopper"> 
          <h2 style="width:300px;text-align:center;">Test</h2> 
         </div> 
<script src="//app-ab09.marketo.com/js/forms2/js/forms2.js"></script> 
<form id="mktoForm_1014"></form> 
<script>MktoForms2.loadForm("//app-ab09.marketo.com", "316-IOJ-097", 1014);</script> 
        </div> 
       </div> 
      </div> 
     </div> 

Answer 1

래퍼에서 인라인 스타일을 제거 :

<div class="contact-form" style="float:right; width:450px; "> 
    <div id="form"> 
    <div id="forminner"> 
    <div id="formtopper"> 
     <h2 style="width:300px;text-align:center;">Test</h2> 

변화 :

<div class="contact-form"> <!--here--> 
    <div id="form"> 
    <div id="forminner"> 
    <div id="formtopper"> 
     <h2 style="width:300px;text-align:center;">Test</h2> 
.... 

450px이 너무 크고 contact-form을 이미 float:right 및 width: 100%을 받고있다 귀하의 CSS에

Answer 2

여러 화면을 사용 미디어 태그 트위터 Bookstrap를 사용하지 않는 이유는

.col-sm-1, 
 
    .col-sm-2, 
 
    .col-sm-3, 
 
    .col-sm-4, 
 
    .col-sm-5, 
 
    .col-sm-6, 
 
    .col-sm-7, 
 
    .col-sm-8, 
 
    .col-sm-9, 
 
    .col-sm-10, 
 
    .col-sm-11, 
 
    .col-sm-12 { 
 
    float: left; 
 
    position: relative; 
 
    min-height: 1px; 
 
    padding-right: 2px; 
 
    padding-left: 2px; 
 
    } 
 
.col-sm-1 { 
 
    width: 8.333333333333332%; 
 
    } 
 
    .col-sm-2 { 
 
    width: 16.666666666666664%; 
 
    } 
 
    .col-sm-3 { 
 
    width: 25%; 
 
    } 
 
    .col-sm-4 { 
 
    width: 33.33333333333333%; 
 
    } 
 
    .col-sm-5 { 
 
    width: 41.66666666666667%; 
 
    } 
 
    .col-sm-6 { 
 
    width: 50%; 
 
    } 
 
    .col-sm-7 { 
 
    width: 58.333333333333336%; 
 
    } 
 
    .col-sm-8 { 
 
    width: 66.66666666666666%; 
 
    } 
 
    .col-sm-9 { 
 
    width: 75%; 
 
    } 
 
    .col-sm-10 { 
 
    width: 83.33333333333334%; 
 
    } 
 
    .col-sm-11 { 
 
    width: 91.66666666666666%; 
 
    } 
 
    .col-sm-12 { 
 
    width: 100%; 
 
    }

<div class="container" > 
 
     <h2 class="section-title" style="float:left;"><?php the_title();?></h2> 
 
     <br> 
 
     <div style="clear:both"></div> 
 
     <div class="interior-inner"> 
 
      <div class="col-sm-8"> 
 
       <?php the_content();?> 
 
      </div> 
 
      <div class="col-sm-3"> 
 
       <div id="form"> 
 
        <div id="forminner"> 
 
         <div id="formtopper"> 
 
          <h2 style="width:300px;text-align:center;">Test</h2> 
 
         </div> 
 
<script src="//app-ab09.marketo.com/js/forms2/js/forms2.js"></script> 
 
<form id="mktoForm_1014"></form> 
 
<script>MktoForms2.loadForm("//app-ab09.marketo.com", "316-IOJ-097", 1014);</script> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div>