How to add contact details next to responsive Google Map


Tags: html,css,twitter-bootstrap,google-maps,responsive-design

Problem :

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; 
}


Solution :

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>

    CSS Howto..

    How to push up text in CSS?

    How to exclude an HTML element form Ionic CSS

    CSS dropdown menu not showing the full texts of submenu items

    How to extract icon from picture and display it in page? (by javascript or jquery or css)

    How to make the table use multiple lines on long text using css

    How to set select icon bigger

    how to change css of the image link when clicked?

    How do I prevent my dropdown from closing when clicking inside it?

    How to change a CSS property dynamically in Angular

    How to create dashed radius border just with css?

    How can I center-align text with uneven icons either side?

    How to correctly add nested divs

    Show popup after page load

    How to make a image css not move at text?

    how to use inline css in master pages

    How do I get a CSS class to show up in my javascript with my previous method?

    how to adjust width of first cell of a table using CSS

    Show outlines around divs in a web-based HTML editor, a la Dreamweaver and other editors

    How to place text at the bottom when there's predefined height!

    How to Programatically Toggle a Zurb Foundation Switch Control, in Chrome?

    How to invoke a “tooltip” when hovering over ID'd HTML elements in a Browser?

    how to download google fonts in version bold

    How to know where a CSS error occurred in dynamic content or how to stop the script upon CSS error

    How to set style if the content is X [duplicate]

    How to select, focused textarea?

    HTML & CSS: Vertical Flow Layout (columnar style), how to implement?

    How to achive certain overlapping layout when there is not enough space in parent container?

    How do I make an image shrink and grow according to re-sizing the browser.

    How to make beatiful select lists?

    How to switch css property according to some condition