联系表单7点击文字字段

Question

有一个媒体查询在检测到横向模式时（以某种方式强制纵向模式）翻转屏幕，因为我正在使用它：

@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape)

我正在使用此查询处理移动版网页（包含联系表单7插件）：

@media only screen and (max-width: 500px) 

所以，当我在移动设备上看到它时，它看起来像 this（现在还不错）

但是，当我点击文字字段时，“屏幕”翻转并看起来像 this，我不知道为什么。请帮帮我。

相关代码：

HTML

<div id="div-mail">
[contact-form-7 id="95" title="formulario de contacto"]
</div>

CSS

#div-mail {
position: relative;
right: -35px !important;
bottom: 270px !important;
max-width: 80%;
z-index:2;
top: -365px;
} 

联系表格7文本字段CSS

#contact-email {
max-width: 65% !important;
}

#contact-textarea {
max-width: 70% !important;
}