Мобильной ошибки стайлинга встречающейся

Question

Привета я следующий код, который genereates мобильной ошибки стайлинга (смотрите рисунок 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%;} 

На сайте это выглядит хорошо:

URL: http://byggprojektoren.se/kontaktaoss/

Изображение мобильной версии;

Я действительно путают о том, как это исправить, так как кажется, что Ive испробовала все. У кого-нибудь есть ключ?

Answer 1

Добавить несколько медиа-запросов. Heres стартер для вас:

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

Answer 2

Вы пробовали использовать бутстрапы или систему сетки фундамента? Проблема здесь в том, что у вас есть ширина 45%, а элементы просто сжимаются поверх каждого другого.

Answer 3

Похоже, что ваш код работает должным образом, но содержимое .left и .right переполняет контейнер. Если вы добавите ширину: 100% и размер окна: рамка на входах & textarea, их размер будет правильно адаптирован.

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