Нужно помочь сделать эту страницу отзывчивой

Question

Я пробовал в течение 3 дней, чтобы моя контактная форма выстроилась в линию с картой iframe, встроенной в ту же страницу. Есть 4 основных div. (1) заголовок IFrame (2) положение IFrame (3) заголовок формы (4) Форма позиции:

<div class="iframeTitle">How to Find Us</div> 
<div class="iframepos"> 
<div class="contactTitle">Contact Us</div> 
<div class="form_pos"> 

Я добавил медиазапросы в код, но все еще есть проблемы даже при использовании онлайн-инструментов, которые показывают, как сайт отображается в разных разрешениях.

Если вы разворачиваете/сокращаете ширину полосы в найденном дне here, вы можете видеть, как карта и форма не всегда бок о бок. Демонстрация включает большую часть моего кода, потому что я чувствовал, что это все актуально, поскольку этот вопрос касается адаптивного дизайна.

Любая обратная связь или исправления будет настолько удивительной. Заранее спасибо

Answer 1

Если вы хотите сделать страницу отзывчивой, вам действительно нужно обернуть ваши элементы в div. Ваша текущая структура:

<header> 

    <div class="iframeTitle"></div> 
    <div class="iframepos"></div> 

</header> 
<div class="contactTitle"></div> 

<div class="form_pos"></div> 

<div class="OfficeEmail"></div> 

<div class="OfficeToll"></div> 

<div class="OfficeLocal"></div> 

<div class="OfficeFax"></div> 

<div class="DropBy"></div> 

<div class="Address1"></div> 

<div class="Address2"></div> 

Это должно быть что-то вроде этого:

<header> 

     <div class="iframeTitle"></div> 
     <div class="iframepos"></div> 

</header> 

<div id="CONTACT_FORM"> 
    <div class="contactTitle"></div> 

    <div class="form_pos"></div> 
</div> 
<div id="ADDRESS"> 

    <div class="OfficeEmail"></div> 

    <div class="OfficeToll"></div> 

    <div class="OfficeLocal"></div> 

    <div class="OfficeFax"></div> 

    <div class="DropBy"></div> 

    <div class="Address1"></div> 

    <div class="Address2"></div> 
</div> 

А затем применить стили с запросом медиа к элементам обертки.

Это должна быть ваша отправная точка.