I have the following page:
http://staging1.beta.liquidchurch.com/locations/essex-county/
On this page I have a Google Map and then two addresses.
My goal is that the map float on the left and the addresses on the right.
I have been able to get this to occur when I used fixed sizes for the map, but when I try and make it responsive, it doesn’t seem to work. Any ideas?
Dave
This is a bit confusing, when I first looked at it, I don’t think it was Bootstrap, but now it appears to be using Bootstrap.
(BTW, I’m not into Bootstrap)
Well you have them side by side now, but the map is not responsive now.
I think it can be fixed by giving the map an extra wrapper and using the “padding trick” to set its aspect like before.
So an extra <div> around the <iframe> with:
position: relative;
overflow: hidden;
padding-bottom: 70%; /* Adjust to aspect */
Then the <iframe> needs to be made to fit:-
position: absolute;
width: 100%;
height: 100%;
… or something along those lines.
Thanks for the reply. Yeah, I had actually worked on it a bit since initially posting and realized I could use the site’s overall bootstrap to handle the positioning. Thanks for your help, I’m good to go now!
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.