移动样式错误发生

Question

我有以下代码产生移动样式错误（见图1）：

<div class="left">
   <p>Ditt namn (obligatorisk)<br />                          
     [text* your-name]</p>
   <p>Din epost (obligatorisk)<br />
     [email* your-email] </p>
   <p>Ditt telefonnummer<br />
     [tel tel-621] </p>
   <p>Ämne<br />
     [select menu-101 include_blank "Konstruktions ritningar" "Visualisering" "Mjukvara utveckling" "Övrigt"]</p>
 </div>
 <div class="right">
   <p>Ditt meddelande<br />
     [textarea your-message] </p>
 </div>
 <p>[submit "Skicka"]</p

css是这样的：

.left, .right {display: inline-block; vertical-align: top; width:45%;}

在网站上看起来不错：

网址：http://byggprojektoren.se/kontaktaoss/

手机版图片;

我真的很困惑如何解决这个问题，因为它似乎已经尝试了一切。有没有人有线索？

Answer 1

添加一些媒体查询。以下是你的首发：

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
    .right {
        clear: both;
        width: 100%;
    }
    .right textarea {
        width:100%;
    }
}

Answer 2

您是否尝试过使用bootstraps或基础网格系统？ 这里的问题似乎是你有45％的宽度，而元素只是挤在彼此之上。

Answer 3

看起来您的代码按预期工作，但.left和.right的内容溢出容器。 如果你添加宽度：100％和box-sizing：border-box on inputs＆amp; textarea，它们的大小将正确适应。

input, textarea {
    width: 100%;
    box-sizing: border-box;
}