Centering html elements such as a...
I'm a newbie to RSD here and I'm trying to figure out how to center a Google map into my site. I copied in the code and the map appears as I want it to, but to the far left instead of centered. Using the "Position" section of the Design module I was able to move it to the left 350 pixels, which looks great on my computer screen but puts the map way over the right one my phone, so obviously this is not the best way to do this. I keep lookin but it's entirely obvious what I'm supposed to do. Any help would be most appreciated! Thanks in advance!
Make sure to use http://embedresponsively.com/ and get the responsive code for your map. With that new markup, there are 2 styles you need to set:
1. Under TYPOGRAPHY, set the Align to Center
2. Under DIMENSIONS, check both box Auto boxes under Margin.
Attached is a simple example showing it all configured.
1. Under TYPOGRAPHY, set the Align to Center
2. Under DIMENSIONS, check both box Auto boxes under Margin.
Attached is a simple example showing it all configured.
Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.
Beautiful! Thanks, Scott! That's exactly what I needed!
Hi Scott,
But how do you set the location you want for the map?? on http://embedresponsively.com/ eg
I want 32 Vine Street, Albany, Wstern Ausrtralia. 6330.
How doI enter this to get the code i need??
But how do you set the location you want for the map?? on http://embedresponsively.com/ eg
I want 32 Vine Street, Albany, Wstern Ausrtralia. 6330.
How doI enter this to get the code i need??
You get that URL from Google Maps.
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3267.6126516706368!2d117.883734451565!3d-35.01640028025814!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2a39272cf7462961%3A0xf8f178bcf225729b!2s32+Vine+St%2C+Centennial+Park+WA+6330%2C+Australia!5e0!3m2!1sen!2sus!4v1469068090380" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3267.6126516706368!2d117.883734451565!3d-35.01640028025814!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2a39272cf7462961%3A0xf8f178bcf225729b!2s32+Vine+St%2C+Centennial+Park+WA+6330%2C+Australia!5e0!3m2!1sen!2sus!4v1469068090380" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.
Ok, I worked i out.
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.