响应地图不显示在550px以下

Question

在此live page地图看起来很不错，除非您在较小的设备上缩小尺寸以查看550px以下的尺寸。这是我为该部分的代码。我需要更改哪些内容才能显示移动设备或较小设备的地图？谢谢

.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 1

问题是巨大的margin-left在.right导致它缩小。

使用媒体查询以仅使用特定视口宽度以上的浮动布局。我添加了一个到你的CSS。您可以调整min-width的值以满足您的需求。这会将您的物品堆放在较小的屏幕上。

.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>

Answer 2

这是你的div。左的宽度。您应该以％为单位制作.left和.right的宽度。类似.left {width：50％;} .right {width：50％;}。