我的联系表单右侧有一张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%; }
答案 0 :(得分:0)
您当前的布局使得正确显示内容变得有点棘手。
我会简化一些事情。
我在代码中添加了我的评论。
外卖是使用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>