CODEWITHSUNDEEP
twitter-bootstrapgoogle-mapsiframe
kaviya
kaviya

Reputation: 67

How to bring my google map embed code for mobile device correctly for mobile device

can any one help me, the map has taking space in right side, how to solve that,I am Having issue with my google map embed for mobile device. If you see my output in webserver, map is not perfectly sitting,right side have so much of space, here is the link, please check, I dont know where i am wrong. 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-->

Upvotes: 2

Views: 1101

Answers (1)

Akber Iqbal
Akber Iqbal

Reputation: 15041

UPDATE: in your index2.html page... replace your iframe div with the 2 divs in the code-snippet below; These 2 divs basically do this:

 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

your iframe is 300px in width... with a padding of 15px on left/right due to "col-sm-6 col-md-6"... the padding on the left is pushing the fixed-width iframe to the right side.

So, you gotta do 2 things

  1. add a class soClass to the div encapsulating the iframe you gotta (like code below)
  2. manage that for widths less than 330px (code snippet below)

Since the iframe map is fixed for 300px, for mobile devices less than 300px of screen width, there will be a horizontal scroll 

@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>

Upvotes: 1

Related Questions