Centering html elements such as a...

User 2054785 Photo


Registered User
23 posts

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!
User 103173 Photo


VP of Software Development
0 posts

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.
Attachments:
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.
User 2054785 Photo


Registered User
23 posts

Beautiful! Thanks, Scott! That's exactly what I needed!
User 331583 Photo


Registered User
2 posts

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??
User 103173 Photo


VP of Software Development
0 posts

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>
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.
User 331583 Photo


Registered User
2 posts

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.