Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

Answer 2

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

响应式地图未在550px下展示

2 个答案: