Css 响应式谷歌地图

我有一个谷歌地图漂浮在我的联系方式的右边。在手机中，它通过移动到我的窗体上方来响应，但它仍然太大，无法适应手机屏幕。我尝试过一些js解决方案，但都没有效果。有什么想法吗

HTML:
       <figure class="showRight"><div id="map">

                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2800.5924582913617!2d-116.31889528431363!3d45.41755717910039!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x54a6c56be892013d%3A0xf34792f82bc2a30b!2s1000+Main+St%2C+Riggins%2C+ID+83549!5e0!3m2!1sen!2sus!4v1500064488028" width="400" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>

                <p class="contactinfo">
                    <strong>SALMON RIVER ADVENTURES</strong><br>
                    1000 S. Main Street<br>Riggins, ID 83549<br>
                    888-888-8888<br>
                </p>
              <h3>Please call us if you have questions.</h3>
               </div></figure>

CSS: 
/* GOOGLE MAP */

#map{
    overflow: hidden;
    position: relative;
}
.showRight{float: right; margin 0 2%; }

HTML：

鲑鱼河冒险之旅

南大街1000号，里金斯，ID 83549

888-888-8888


如果你有问题，请打电话给我们。
CSS:
/*谷歌地图*/
#地图{
溢出：隐藏；
位置：相对位置；
}
.showRight{float:right；边距0.2%；}

您当前的布局使正确显示内容变得有点棘手

我会把事情简化一点

我在代码中添加了我的注释

外卖是用来

工作示例：

#映射#包装器，#侧栏{
宽度：350px；/*为地图和侧边栏中的每个图标设置所需的宽度*/
高度：400px；/*为地图和侧边栏中的每个图标设置所需的高度*/
背景：#131418；/*可选*/
}
梅因先生{
最大宽度：700px；/*设置整个容器所需的最大宽度*/
显示：flex；/*magic*/
flex wrap:wrap；/*更重要的魔法！如果屏幕不够大，这将使地图转到下一行*/
}
梅因先生，
#侧边栏，
#映射包装器{
边距：0自动；/*使项目在换行到下一行时位于页面中心*/
}
/*CSS的其余部分仅用于样式设置*/
.主要投入{
显示：块；
保证金：5px0；
宽度：100%；
}
.main字段集{
保证金：4.5em.5em；
颜色：#999；
}

函数initMap（）{var map=new google.maps.map（document.getElementById（'map'），{center:{lat:40.674，lng:-73.945}，zoom:12，}）
我们能为您做些什么？
全名：
电邮：
电话：
抵达日期：

试试

#map{max width:100vw}

或者在你的站点上添加链接（如果它是活动的）。我试着添加#map{max width:100vw}，但它没有响应。网站还没有上线。谢谢我的haz kode！！我不得不放弃让它漂浮在联系方式的右边。当我这么做的时候，你建议的最大宽度。。。工作得很好。非常感谢你。TanjaNo问题。我很高兴你明白了。