Adjusting embedded map

• 

  epochhealth · Member · Sep 27, 2017 at 11:53 pm

  • Copy link
  • Add topic to favorites

  Hi,
  I’m trying to make my map the same width as the ‘contact’ page. I’ve tried plugging in a css code but it has gone off the page.

  Can someone help me?

  Thanks,
  David

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

• 

  taniametalli · Member · Sep 28, 2017 at 9:21 am

  • Copy link

  Hi there,

  You can try and make your map responsive, so not only is the same width as the contact page, but it’ll also resize on different screen sizes.

  You’ll need to add a div class before the iframe:

  <div class="responsive-map"> <iframe src="https://www.google.com/maps/embed?.....></iframe>
  </div>

  Then add your custom CSS:

  .responsive-map{
  overflow:hidden;
  padding-bottom:56.25%;
  position:relative;
  height:0;
  }
  
  .responsive-map iframe{
  left:0;
  top:0;
  height:100%;
  width:100%;
  position:absolute;
  }

  You can adjust the CSS depending your requirements.

  I’ve tested and it worked on mine.

  Let me know how that goes.

• 

  epochhealth · Member · Sep 29, 2017 at 2:31 am

  • Copy link

  Hi,

  Thank you so much. It worked perfectly, exactly what I saw looking for.

• 

  taniametalli · Member · Sep 29, 2017 at 9:06 am

  • Copy link

  That’s great! You’re welcome.