Question

我的联系表单右侧有一张Google地图。在移动设备中，它通过移动到我的表单之上来响应，但它仍然太大而不适合移动屏幕。我尝试了一些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%; }

Answer 1

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

我会简化一些事情。

我在代码中添加了我的评论。

外卖是使用display:flex

工作示例：

#map_wrapper, #sideBar {
  width: 350px; /* Set the desired width for each the map and the sidebar */
  height: 400px; /* Set the desired height for each the map and the sidebar */
  background: #131418; /* optional */
}

.main {
  max-width: 700px; /* Set the desired max-width for the entire container*/
  display: flex; /* magic */
  flex-wrap: wrap; /* even more important magic! This will make the map go to the next line if the screen is not big enough */
}

.main,
#sideBar,
#map_wrapper {
  margin: 0 auto; /* Makes items go in the center of the page if they wrap to the next line */
}


/* The rest of the CSS is for styling only */ 
.main input {
  display: block;
  margin: 5px 0;
  width: 100%;
}

.main fieldset {
  margin: 4.5em .5em;
  color: #999;
}

<!-- initilize map -->
<script>
  function initMap() {var map = new google.maps.Map(document.getElementById('map'), {center: {lat: 40.674,lng: -73.945},zoom: 12,})}
</script>


<!--Map setup -->
<div class="main">

  <div id="sideBar">
    <fieldset>
      <legend>How Can We Help You?</legend>
      <div><label><span>Full Name:</span><input name="name" type="text" placeholder="First Last" pattern="[A-z\s]{3,99}" required="" autofocus="" title="Please provide your full name (minimum of 3 characters)"></label></div>
      <div><label><span>Email:</span><input name="email" type="email" placeholder="user@gmail.com" required="" title="Please provide a valid email address"></label></div>
      <div><label><span>Phone:</span><input name="phone" type="tel" required="" title="Please provide a valid phone number"></label></div>
      <div><label><span>Arrival Date:</span><input name="date" type="date"></label></div>
    </fieldset>
  </div>


  <div id="map_wrapper">
    <div id="map" style='width: 100%; height: 100%;'></div>
  </div>

</div>



<!-- Load google API in the footer. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDHu4QBgWONqtdOWVLTW5XZ51B1eOU6SWw&callback=initMap" async defer></script>

响应式Google地图

1 个答案: