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已在您的CSS中收到float:right和width: 100%

Answer 2

尝试仅使用样式表为多个屏幕使用媒体标记添加样式

.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>

响应页面不起作用

2 个答案: