モバイルモードでGoogleマップのテンプレートと異なる幅を設定する方法

Question

モバイルモードでは、Googleマップのテンプレートと異なる幅を設定するにはどうすればいいですか？デスクトップモードには完全に適合しますが、モバイルモードでは、ここで

は私のコードです：

@section ('map') 
<div id="map"></div> 

<script> 
    function initMap() { 
     var uluru = {lat: 32.063256, lng: 34.776371}; 
     var map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 18, 
      center: uluru 
     }); 
     var marker = new google.maps.Marker({ 
      position: uluru, 
      map: map 
     }); 
    } 
</script> 
<script async defer 
     src="https://maps.googleapis.com/maps/api/js?key=AIzaSyByM5NtgUPSOLQg_oX_7LgEwEX5XyYO3zI&callback=initMap"> 
</script> 

@endsection 

マイCSS：

#map { 
     height: 280px; 
     width: 500px; 
     } 

Answer 1

私はすべての私の応答性の設計を行うために@media screenで600または780 max-widthのいずれかを使用します。私はあなたのデフォルトのCSSを異なる画面幅で上書きすることができます。

#map { 
    height: 280px; 
    width: 500px; 
} 

@media screen and (max-width: 600px) { 
    #map { 
     height: 140px; 
     width: 250px; 
    } 
}