chris chris - 7 months ago 38
HTML Question

How to add contact details next to responsive Google Map

Sorry if this is basic but I've been trying to add the contact details next to the google map. But they end up displaying below the map, instead of next to them. What am i missing? really appreciate your help!

This is how it currently looks:

Current Display

HTML:

<div class="span9">
<div class="map-responsive">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d386950.6511603643!2d-73.70231446529533!3d40.738882125234106!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNueva+York!5e0!3m2!1ses-419!2sus!4v1445032011908" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
</div>
<div class="span3">
<div class="contact-details">
<h3>Contact Details</h3>
<ul>
<li><a href="#">hello@hello.com</a></li>
<li>(916) 375-2525</li>
<li>
NY City meet
<br>
NY City
<br>
USA
</li>
</ul>
</div>
</div>
</div>


CSS:

.map-responsive{
overflow:hidden;
padding-bottom:50%;
position:relative;
height:0;
}
.map-responsive iframe{
left:0;
top:0;
height:80%;
width:50%;
position:absolute;
}


.contact-details h3 {
color: #FFFFFF;
font-size: 24px;
font-weight: 300;
margin-bottom: 30px;
line-height: 1em;
text-transform: uppercase;
}

.contact-details ul {
margin: 0;
padding: 0;
list-style: none;
}

.contact-details ul li {
margin: 0 0 20px;
line-height: 28px;
padding: 0;
}

Answer

I have used bootstrap version 2.3.1

Check Updated Fiddle

HTML

    <div class="row">

  <div class="span9">
    <div class="map-responsive">
      <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d386950.6511603643!2d-73.70231446529533!3d40.738882125234106!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNueva+York!5e0!3m2!1ses-419!2sus!4v1445032011908" width="100%" height="350" frameborder="0" style="border:0" allowfullscreen></iframe>
    </div>
  </div>
  <div class="span3">
    <div class="contact-details">
      <h3>Contact Details</h3>
      <ul>
        <li>
          <a href="#">
            hello@hello.com
          </a>
        </li>
        <li>(916) 375-2525</li>
        <li>
          NY City meet
          <br>
          NY City
          <br>
          USA
        </li>
      </ul>
    </div>
  </div>

</div>