レスポンスマップが550px未満に表示されています

Question

このlive pageでは、小さいデバイスで表示するためにサイズを変更した場合を除いて、地図は大きく見えます。これは、その部分の私のコードです。モバイルデバイスや小型デバイスの地図を表示するには、何を変更する必要がありますか？それはあなたのdiv .LEFTの幅である

.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に1つ追加しました。あなたのニーズに合わせて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

ありがとうございました。 .leftと.rightの幅は％で指定する必要があります。 .left {width：50％;} .right {width：50％;}のようなものです。