Оптимизация по ширине в моб устройствах.

[NOMEL]

Доброго времени суток, подскажите как мне решить проблему? Сделана карта магазинов под рекомендуемыми товарами в формате "Html содержимое".
В мобильной версии оптимизируется криво, растягивается. Есть решение может или совет?

<p></p><p></p><div id="map">
<div class="map">
<h2 style="color: rgb(0, 0, 0); text-align: center;"><br></h2></div></div><p>
    </p><p></p><p></p><br><p></p><p></p><p></p><table border="0" cellpadding="5" width="100%" margin-top="5px"><tbody><tr>
     <td bgcolor="#303030" style="margin-top:20%;" colspan="3"><h2 style="text-align: center;"><font color="#dedede" face="Comfortaa">СХЕМА ПРОЕЗДА</font><font face="Comfortaa">&nbsp;</font></h2></td>
    </tr>
    <tr>
     <td><h3 style="text-align: center; " comfortaa";,="" sans-serif;="" color:="" rgb(0,="" 0,="" 0);="" text-align:="" center;"="">ул. Березовая, 34, Дмитров, Московская обл., 141800<iframe src="https://api-maps.yandex.ru/frame/v1/-/C6U2jF02" width="500" height="300" frameborder="1" style="background-color: transparent; font-size: 12px;"></iframe><img src="http://vashdom-market.ru/image/catalog/vd2.jpg" style="width: 500px;"></h3></td>
     <td><p><br></p><p>&nbsp;&nbsp;</p></td>
     <td><h3 style="text-align: center; " comfortaa";,="" sans-serif;="" color:="" rgb(0,="" 0,="" 0);="" text-align:="" center;"="">ул. Пушкинская, 1, Дмитров, Московская обл., 141800<iframe <iframe="" src="https://api-maps.yandex.ru/frame/v1/-/C6ULrFOv" width="500" height="300" frameborder="2"></iframe><img src="http://vashdom-market.ru/image/catalog/pushkinskaya.jpg" style="width: 500px;"></h3></td></tr></tbody><tbody></tbody></table>

 

Змінено 25 липня 2017 користувачем NOMEL

[Shkip]

криво все сверстано( 

у вас все загнано в таблицу, и фиксированная ширина карт. а таблица с шириной 100%. вот в сумме и дает 1007рх ширины минимум при любых экранах.

[Agatha65]

Spoiler

<div class="row">
<div class="col-md-6">
<p>ул. Березовая, 34, Дмитров, Московская обл., 141800</p>
<iframe src="https://api-maps.yandex.ru/frame/v1/-/C6U2jF02"></iframe>
<img src="http://vashdom-market.ru/image/catalog/vd2.jpg" class="img-responsive">
</div>
<div class="col-md-6">
<p>ул. Пушкинская, 1, Дмитров, Московская обл., 141800</p>
<iframe src="https://api-maps.yandex.ru/frame/v1/-/C6ULrFOv"></iframe>
<img src="http://vashdom-market.ru/image/catalog/pushkinskaya.jpg" class="img-responsive">
</div>
</div>

и карту сделать на 100%

[NOMEL]

Agatha65, Спасибо, в мобильной версии все стало отлично, вот только не пойму как под размер контейнера подогнать карту и картинки на ПК

[Agatha65]

<div class="container-fluid">

изменить на

<div class="container">

и карта настроить в Яндекс на 100%

[NOMEL]

Спасибо