未能在移动设备上放置1个部分

时间：2017-02-27 10:43:07

标签： html css mobile resize

我有一个自动调整大小到手机版的网站，但是我在调​​整大小1部分到移动版时遇到了问题，我想将地点，国家/地区，电话号码，地址，电子邮件放在屏幕左侧但没有我尝试过的东西确实有效。

		@import url(https://fonts.googleapis.com/css?family=Hind); /*--- Body Font --*/
		@import url(https://fonts.googleapis.com/css?family=Sansita); /*--- Heading Font --*/
		@import url(https://fonts.googleapis.com/css?family=Questrial);
		* {
			margin : 0;
			padding : 0;
			border : 0;
		}

		body {
			background-color :#dbdbdb;
			font-family: 'Hind', sans-serif;
			font-size :18px ;
			position : relative;
		}
		h1 {
			font-family: 'Sansita', sans-serif;
			text-transform: uppercase;
			color : #4A4444;
			text-align: center;
			margin-top : 150px;
		}
		h4 {
			color : #4A4444;
			font-family: 'Questrial', sans-serif;
		}

		p {
			padding : 2%;
			color : #4A4444;
			text-align:justify;
			max-width: 100%;
		}

		img {
			max-width: 100%;
			max-height: : auto;
		}
		#banner-wrapper{
			max-width: 1280px;
			margin:0 auto;
		}
		.sidebar{
			border: 1px solid;
			width:26%;
			float : left;
			margin:4% 4%;
		}
		#map {
		        width: 100%;
		        height: 350px;
		        min-height: :350px;
		      }


		.right-col{
			width:60%;
			float: right;
			margin:4% 0 4% 4%;
			background-color: #dbdbdb;
		}
		.clear {
			clear : both;
		}
		footer {
			width: 100%;
			height:60px;
			background-color :#e5e5e6;
			margin :0;
			padding: 0;
			overflow: auto;
		    border-top: 0.1px solid #6ca204
		}
		footer p {
			text-align: center;
			color : #4A4444;
			padding :15px;
		}

			#hline {
				visibility: visible;
			}

		@keyframes slider {
			
			0% {
				left: 0%;
			}
			
			20% {
				left: 0%;
			}
			
			25% {
				left: -100%;
			}
			
			45% {
				left: -100%;
			}
			
			50% {
				left: -200%;
			}
			
			70% {
				left: -200%;
			}
			
			75% {
				left: -300%;
			}
			
			95% {
				left: -300%;
			}
			
		}
		#slider {
			overflow: hidden;
			width:100%;
		}
		#slider figure img {
			width: 20%;
			float: left;
		}
		#slider figure {
			position: relative;
			width : 500%;
			margin: 0;
			left: 0;
			text-align: left;
			font-size: 0;
			animation : 20s slider infinite;
		}

		label {
			text-align: center;
			font-family: 'Hind', sans-serif;
			color : #000;
			font-size :130% ;
		    font-weight: bold;

		}
	<!DOCTYPE html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body>
	<div id="banner-wrapper">
		<h1>Contacts</h1>
		<section class="right-col">
		<label class="place">Place:</label><h4 class="h4place">sdffadfdf</h4>
		<label class="country">Country:</label><h4 class="h4country">sdffadfdf</h4>
		<label class="pnumber">Phone Number:</label><h4 class id="h4pnumber">sdffadfdf</h4>
		<label class="adress">Adress:</label><h4 class ="h4adress">sdffadfdf</h4>
		<label class="email">Email:</label><h4 class="h4email">sdffadfdf</h4>
		</section>
	<section class ="sidebar">
			<div id="map"></div>
	    <script>
	      function initMap() {
	        var uluru = {lat:38.755181, lng:-9.142975};
	        var map = new google.maps.Map(document.getElementById('map'), {
	          zoom: 15,
	          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=AIzaSyCZ02PzAtIujMucF_Deulpvwo0FD4LWLtw&callback=initMap">
	    </script>
		</section>
		<div id="hline" style="width: 100%;height:2px;background-color: #4a4444;z-index: 5;overflow: auto; opacity: 1;">
	</div>
		<div class="clear"></div>
		<footer>
			<p>&copy; HardSecure 2017-2017</p>
		</footer>
		<div class="clear"></div>
	</body>
	</html>

移动版

		@import url(https://fonts.googleapis.com/css?family=Hind); /*--- Body Font --*/
		@import url(https://fonts.googleapis.com/css?family=Sansita); /*--- Heading Font --*/
		@import url(https://fonts.googleapis.com/css?family=Questrial);
		* {
			margin : 0;
			padding : 0;
			border : 0;
		}

		body {
			background-color :#dbdbdb;
			font-family: 'Hind', sans-serif;
			font-size :18px ;
			position : relative;
		}
		h1 {
			font-family: 'Sansita', sans-serif;
			text-transform: uppercase;
			color : #4A4444;
			text-align: center;
			margin-top : 150px;
		}
		h4 {
			color : #4A4444;
			font-family: 'Questrial', sans-serif;
		}

		p {
			padding : 2%;
			color : #4A4444;
			text-align:justify;
			max-width: 100%;
		}

		img {
			max-width: 100%;
			max-height: : auto;
		}
		#banner-wrapper{
			max-width: 1280px;
			margin:0 auto;
		}
		.sidebar{
			border: 1px solid;
			width:26%;
			float : left;
			margin:4% 4%;
		}
		#map {
		        width: 100%;
		        height: 350px;
		        min-height: :350px;
		      }


		.right-col{
			width:60%;
			float: right;
			margin:4% 0 4% 4%;
			background-color: #dbdbdb;
		}
		.clear {
			clear : both;
		}
		footer {
			width: 100%;
			height:60px;
			background-color :#e5e5e6;
			margin :0;
			padding: 0;
			overflow: auto;
		    border-top: 0.1px solid #6ca204
		}
		footer p {
			text-align: center;
			color : #4A4444;
			padding :15px;
		}

			#hline {
				visibility: visible;
			}

		@keyframes slider {
			
			0% {
				left: 0%;
			}
			
			20% {
				left: 0%;
			}
			
			25% {
				left: -100%;
			}
			
			45% {
				left: -100%;
			}
			
			50% {
				left: -200%;
			}
			
			70% {
				left: -200%;
			}
			
			75% {
				left: -300%;
			}
			
			95% {
				left: -300%;
			}
			
		}
		#slider {
			overflow: hidden;
			width:100%;
		}
		#slider figure img {
			width: 20%;
			float: left;
		}
		#slider figure {
			position: relative;
			width : 500%;
			margin: 0;
			left: 0;
			text-align: left;
			font-size: 0;
			animation : 20s slider infinite;
		}

		label {
			text-align: center;
			font-family: 'Hind', sans-serif;
			color : #000;
			font-size :130% ;
		    font-weight: bold;

		}

			@media screen and (max-width: 481px){
			.sidebar, #map {
				width: 100%;
				margin :0;
		        height: 300px;
			}
			.right-col {
				width: : 100%;
				margin: 0 0 3% 0;
				text-align :left;
			}
		}
	<!DOCTYPE html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body>
	<div id="banner-wrapper">
		<h1>Contacts</h1>
		<section class="right-col">
		<label class="place">Place:</label><h4 class="h4place">sdffadfdf</h4>
		<label class="country">Country:</label><h4 class="h4country">sdffadfdf</h4>
		<label class="pnumber">Phone Number:</label><h4 class id="h4pnumber">sdffadfdf</h4>
		<label class="adress">Adress:</label><h4 class ="h4adress">sdffadfdf</h4>
		<label class="email">Email:</label><h4 class="h4email">sdffadfdf</h4>
		</section>
	<section class ="sidebar">
			<div id="map"></div>
	    <script>
	      function initMap() {
	        var uluru = {lat:38.755181, lng:-9.142975};
	        var map = new google.maps.Map(document.getElementById('map'), {
	          zoom: 15,
	          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=AIzaSyCZ02PzAtIujMucF_Deulpvwo0FD4LWLtw&callback=initMap">
	    </script>
		</section>
		<div id="hline" style="width: 100%;height:2px;background-color: #4a4444;z-index: 5;overflow: auto; opacity: 1;">
	</div>
		<div class="clear"></div>
		<footer>
			<p>&copy; HardSecure 2017-2017</p>
		</footer>
		<div class="clear"></div>
	</body>
	</html>

移动广告

0 个答案:

没有答案
相关问题
最新问题