Как правильно перенести код моей карты Google для мобильного устройства на мобильное устройство - PullRequest
Новая
       3

Как правильно перенести код моей карты Google для мобильного устройства на мобильное устройство

0 голосов
/ 30 ноября 2018

может мне кто-нибудь помочь, на карте есть место в правой части, как это решить, у меня возникла проблема с встраиванием моей карты Google для мобильных устройств.Если вы видите мой вывод в веб-сервере, карта не идеально сидит, на правой стороне так много места, вот ссылка, пожалуйста, проверьте, я не знаю, где я не прав.http://lotusvalue.com/index1.html

<div class="agile-contact1">
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-6" style="padding-left:30px;"><img src="imagesnew/imagelog3.png" class="img-responsive"><br/>
<p>#2112, 3rd Floor, 9th Main, 15th Cross,<br/>
D' Block,Sahakar Nagar Bengaluru - 560092.</p>
</div>
<div class="col-sm-6 col-md-6"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3886.6139875875365!2d77.58402861482297!3d13.060225090797745!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3bae1821ca8b1d9f%3A0x8fd257ca32720efd!2sLotus+Value+Developers!5e0!3m2!1sen!2sin!4v1543592662682" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe></div>
</div><!--endofcontainer-->
</div><!--endofrow-->
</div><!--endofagile-->

1 Ответ

0 голосов
/ 01 декабря 2018

ОБНОВЛЕНИЕ: на вашей странице index2.html ... замените ваш iframe div на 2 div в приведенном ниже фрагменте кода;Эти два деления в основном делают это: 

 1. First div with 500px map which displays on desktop/tablet only and hides in mobile.
 2. Second div with 300px map which hides on desktop/tablet and displays only on mobile

ваш iframe имеет ширину 300px ... с отступом 15px слева / справа из-за "col-sm-6 col-md-6" ..... отступ слева толкает iframe фиксированной ширины вправо.

Итак, вам нужно сделать 2 вещи

  1. добавить класс soClass в div, инкапсулирующий iframe.вы должны (как код ниже)
  2. управлять этим для ширины менее 330 пикселей (фрагмент кода ниже)

Поскольку карта iframe фиксирована для 300 пикселей, для мобильных устройств менее 300 пикселейширина экрана, будет горизонтальная прокрутка 

@media screen AND (max-width:330px){
.soClass{
padding: 0;
}
}
<div class="col-sm-6 col-md-6 soClass hidden-md hidden-lg"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3886.6139875875365!2d77.58402861482297!3d13.060225090797745!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3bae1821ca8b1d9f%3A0x8fd257ca32720efd!2sLotus+Value+Developers!5e0!3m2!1sen!2sin!4v1543592662682" style="border:0"></iframe></div>

<div class="col-sm-6 col-md-6 hidden-sm  hidden-xs">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3886.6139875875365!2d77.58402861482297!3d13.060225090797745!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3bae1821ca8b1d9f%3A0x8fd257ca32720efd!2sLotus+Value+Developers!5e0!3m2!1sen!2sin!4v1543580574885" width="500" height="250" frameborder="0" style="border:0"></iframe></div>
...