responsive Karte nicht unter 550px

Question

Auf dieser live page die Karte sieht gut aus, außer wenn Sie Größe auf kleinere Geräte, appro unter 550px verkleinern. Dies ist mein Code für diesen Teil für diesen Abschnitt. Was muss ich ändern, um die Karte für mobile oder kleinere Geräte anzuzeigen? danke

.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

Das Problem ist die riesige margin-left auf .right verursacht es zu schrumpfen.

Verwenden Sie eine Medienabfrage, um das Float-Layout nur oberhalb einer bestimmten Ansichtsfensterbreite zu verwenden. Ich habe eins zu deinem CSS hinzugefügt. Sie können den Wert min-width an Ihre Bedürfnisse anpassen. Dadurch werden Ihre Artikel auf kleineren Bildschirmen gestapelt.

.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

Es ist die Breite Ihres div .left ist. Sie sollten die Breite der linken und rechten Seite in% angeben. So etwas wie .left {width: 50%;} .right {width: 50%;}.