mlegg mlegg - 5 months ago 23
CSS Question

responsive map not showing under 550px

On this live page the map looks great except when you size down to view on smaller devices, appro under 550px. This is my code for that part for that section. What do I have to change to show the map for mobile or smaller devices? thank you



.columns
{
width:100%;
}
.left
{
float:left;
width:460px;

}
.right
{
margin-left:500px;
}
.clear
{
clear:both;
}
.google-maps {
position: relative;
padding-bottom: 75%; // This is the aspect ratio
height: 0;
overflow: hidden;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}

<div class="columns">
<div class="left">
<p><b>Pebble Cove Motel</b></p>
<p>741 Ocean Blvd</p>
<p>Rye, NH 03870</p>
<p><a href="mailto:pebblecovemotel@comcast.net">PebbleCoveMotel@comcast.net</a></p>
<p>Phone: <a href="tel:6034368108">603-436-8108</a></p>
</div>
<div class="right">
<div class="google-maps">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d186637.02907792313!2d-70.85793188067471!3d43.037147979147306!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89e2c0b2dad571d3%3A0xf0f66f2f40db8717!2sPebble+Cove+Motel!5e0!3m2!1sen!2sus!4v1463168351650" width="450" height="450"></iframe>
</div>

</div></div>
<div style="clear:both;"></div>




Answer

The problem is the huge margin-left on .right causes it to shrink.

Use a media query to only use the float layout above a certain viewport width. I added one to your CSS. You can adjust the min-width value to suit your needs. This will stack your items on smaller screens.

.columns
{
    width:100%;
}
@media only screen and (min-width: 800px) {
  .left
  {
      float:left;
      width:460px;
  }
  .right
  {
      margin-left:500px;
  }
}
.clear
{
    clear:both;
}
.google-maps {
    position: relative;
    padding-bottom: 75%; // This is the aspect ratio
    height: 0;
    overflow: hidden;
}
.google-maps iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}
<div class="columns">
    <div class="left">
<p><b>Pebble Cove Motel</b></p> 
<p>741 Ocean Blvd</p> 
<p>Rye, NH 03870</p>
<p><a href="mailto:pebblecovemotel@comcast.net">PebbleCoveMotel@comcast.net</a></p>
<p>Phone: <a href="tel:6034368108">603-436-8108</a></p>
</div>
    <div class="right">
<div class="google-maps">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d186637.02907792313!2d-70.85793188067471!3d43.037147979147306!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89e2c0b2dad571d3%3A0xf0f66f2f40db8717!2sPebble+Cove+Motel!5e0!3m2!1sen!2sus!4v1463168351650" width="450" height="450"></iframe>
</div>

</div></div>
<div style="clear:both;"></div>