Css 发生移动样式设置错误

我有以下代码生成了一个移动样式错误，请参见图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

在网站上看起来不错：

网址：

手机版图片

---

我真的很困惑如何解决这个问题，因为我似乎什么都试过了。有人有线索吗？

添加一些媒体查询。这是给你的开始：

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

---

你试过使用靴带或基础格栅系统吗？

---

这里的问题似乎是，您的宽度为45%，而元素只是彼此挤压在一起。

看起来您的代码工作正常，但.left和.right的内容溢出了容器。 如果在输入和文本区域中添加宽度：100%和框大小：边框框，它们的大小将正确调整

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

---

您应该在答案中添加所有相关代码，并可能提供fiddle.left、.right{display:inline block；vertical align:top；min width:45%；}@Luca我还没有解决这个问题。@Pye您粘贴的代码与我的相同？@RinorM min width而不是widthHi，我是否在CSS中加上左边和右边？这意味着什么？新的规则：？左。右：{显示：内联块；垂直对齐：顶部；宽度：45%；}输入，TeXTaRea{宽：100%；框大小：边框；}嗨，我有点新，从来没有使用过引导或基础网格系统。我会试着调整一下宽度。如果你想让它在手机和桌面上都工作，那么你应该看看其中的一个，它们有非常好的例子，然后在你掌握了它之后，你可以开始创建自己的媒体查询网格。这可能是您使用引导的开始：谢谢。但我真的不确定如何在我的问题中实现它？将col-sm-6 col-xs-12类添加到具有左类和右类的元素中，并将它们都放在一个div中，该div包含一个类行。别忘了下载并添加bootstrap.css我应该调整哪些组件以使移动站点得到纠正？只需复制整个块，它就会整理出来。

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