css - 响应页面不工作

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 中