Google map not scaling right

HTML & CSS
1

I am trying to implement a google map into my website, and get it to be a square half the width of the section, but the ui is being clipped off. how do I get it to be the same width as height, and prevent it from being cropped at the edge?

Code:

   <div class="row">
		<div class="w50">
			<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d51304.96198466676!2d-105.570764!3d36.516479!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x2d586d6e8c17be9f!2sSol+Food+Market+and+Cafe!5e0!3m2!1sen!2sus!4v1517888800929" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
		</div>
		<div class="w50">
			<div>
				<h1>Location</h1>
				<p>591 Arroyo Hondo Arroyo Seco Rd., Arroyo Seco, NM 87514</p>
			</div>
		</div>
	</div>

.row {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
}

.w50 {
	width: 50%;
}
2

Hi quigongmc,

Working off this general procedure for responsive iframes…

I incorporated it into your flexbox layout. It was kinda tricky to keep the flex rules out of the iframe div, if they get in there it breaks the responsive iframe.

But I was able to reinstate the flex rules on the right side (text div) so as to align the h & p tags.

There are comments in the CSS, see if this helps…


<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test Page</title>
<style>
.row {
   display: flex;
   flex-direction: row;
}
.w50 {   /*no flex rules here, breaks responsive iframe*/
   width:50%;
   outline:1px solid red;
}
.w50.text {  /*add new class to align the text with flex*/
   display:flex;
}
.w50.text * {  /* h1 & p tag align with margin:auto*/
   margin:auto;
   padding:.25em 1em;
   text-align:center;
}
.ratio {
   position:relative;
   height:0;
   padding-bottom:75%; /*height Ă· width = aspect ratio*/
   overflow:hidden;
}
.ratio iframe {
   position:absolute;
   top:0;left:0;
   width:100%;
   height:100%;
}
</style>

</head>
<body>

   <div class="row">
      <div class="w50">
         <div class="ratio">
            <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d51304.96198466676!2d-105.570764!3d36.516479!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x2d586d6e8c17be9f!2sSol+Food+Market+and+Cafe!5e0!3m2!1sen!2sus!4v1517888800929" width="600" height="450" style="border:0" allowfullscreen></iframe>
         </div>
      </div>
      <div class="w50 text">
         <div>
            <h1>Location</h1>
            <p>591 Arroyo Hondo Arroyo Seco Rd., Arroyo Seco, NM 87514</p>
         </div>
      </div>
   </div>

</body>
</html>
2 Likes
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.