Google map not scaling right

HTML & CSS
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