How do I adjust the width of my map on a contact page?

• 

  laurapalmerwp · Member · Mar 17, 2015 at 3:05 pm

  • Copy link
  • Add topic to favorites

  is it possible to have the map the same width as the text/comments field on my contact page?

  This is for website: https://mygoodmeasure.wordpress.com/contact/

  The blog I need help with is: (visible only to logged in users)

• 

  rachelmcr · Member · Mar 18, 2015 at 9:44 am

  • Copy link

  Hi there,

  When you’re working with Google Maps, you can customize the size of the embedded map when you create the map on Google. That will adjust the embed code Google gives you so that the embedded map is the size you’d like.

  Please let me know if I can do anything more to help with that. :)

• 

  laurapalmerwp · Member · Mar 18, 2015 at 3:13 pm

  • Copy link

  Sorry, I wasn’t quite clear on this one. The map is fine on my desktop, its just on my mobile its not. So presume I ought to be using a percentage? If I need one of those media query bits of code, I will need help with that.

  Thanks again.

• 

  rachelmcr · Member · Mar 18, 2015 at 4:02 pm

  • Copy link

  Ah, I see what you mean now. Yes, using a percentage would resolve this on all devices, since you’re already using a percentage to define the width of the form.

  Here’s how you’re defining the width of the form fields in the contact form:

  #contact-form-15 .contact-form input[type='text'], #contact-form-15 .contact-form input[type='email'] {
    width: 80%;
  }

  If you’d like the Google map to be the same width, you can resize the Google map’s container div element to match that width. Without that, the map will be shown at its original size (or the largest width that fits into the width of the page).

  Please let me know if you have any other questions about that. :)

• 

  laurapalmerwp · Member · Mar 19, 2015 at 1:57 pm

  • Copy link

  Thanks – that worked