Медиа-запрос имеет два разных результата для нижнего колонтитула на двух разных страницах, хотя коды одинаковы? - PullRequest
Новая
       54

Медиа-запрос имеет два разных результата для нижнего колонтитула на двух разных страницах, хотя коды одинаковы?

0 голосов
/ 12 февраля 2019

Я только что закончил медиа-запросы для моей домашней страницы.Я сделал 3 из них, один для максимальной ширины 1024 пикселей, один для максимальной ширины 724 пикселей и другой для 425 пикселей.У меня проблема с дисплеем 724px (дисплеем планшета). Когда я закончил домашнюю страницу, я начал копировать эти медиазапросы на страницу about, потому что навигация и нижний колонтитул одинаковы для всего сайта.Однако нижний колонтитул на странице «о» трясется, как показано здесь:

about page

Код ниже - домашняя страница, а ссылка на скрипку - страница о.

https://jsfiddle.net/xqkweov4/3/

body, html {
	margin: 0;
	padding: 0;
}

/*---HEADER---*/

li a {
	text-decoration-line: none;
	color: rgba(102,102,102,0.75);
}

header {
	background: blue;
	height: 100vh;
	background-attachment: fixed;
}

nav {
	background-color: white;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2;
	box-shadow: 0px 0px 100px grey;
}

ul {
	margin-right: 30px;
	margin-top: 25px;
}

li {
	display: inline-block;
	font-size: 1.55rem;
	margin-right: 20px;
	font-family: 'Rajdhani';
}

li a:hover {
	cursor: pointer;
	color: #1a1a1a;
	transition: all 0.7s ease;
}

.after:after {
	position: relative;
	left: 12px;
	top: 2px;
	display: inline-block;
	content: "";
	width: 1px;
	height: 20px;
	background-color: rgba(102,102,102,0.25);
}

.logo {	color: red;
	font-size: 3.7rem;
	margin: 10px;
	opacity: 1;
	margin-left: 30px;
}

.phrase {
	text-align: center;
	position: relative;
	top: 300px;
}

.phrase p {
	color: white;
	font-size: 3.5rem;
	font-family: 'Arvo';
	margin-bottom: 30px;

}

.phrase a {
	background-color: red;
	border-radius: 25px;
	color: white;
	font-family: 'Bitter';
	font-size: 1.8rem;
	padding-left: 15px;
	padding-right: 15px;
	padding-bottom: 10px;
	padding-top: 10px;
}

.phrase a:hover {
	background-color: #cc2900;
	transition: all 0.2s ease;
	cursor: pointer;
}

.phrase .fas {
	display: block;
	color: white;
	font-size: 3.5rem;
	margin-top: 15px;
}

/*---PROMISE---*/

.stats {
	width: 100%;
	display: flex;
	box-shadow: 0px 0px 150px grey;
	position: relative;
	z-index: 1;
	background-color: white;
}

.stats div {
	display: inline-block;
	flex-basis: 35%;
	text-align: center;
	padding-bottom: 30px;
}

.stat-info {
	font-size: 2rem;
	color: rgba(102,102,102, 1);
	font-family: 'Rajdhani';
	margin-bottom: 0;
	margin-top: 10px;
}

.stat-num {
	color: red;
	font-family: 'Rajdhani';
	font-size: 3rem;
	margin: 0;
	font-weight: bolder;
}

.stats div:before {
	display: inline-block;
	content: '';
	width: 2px;
	height: 35px;
	background-color: rgba(102,102,102, 0.60);
}

.promise {
	width: 100%;
	background: blue;
	background-position: center;
	background-attachment: fixed;
	background-size: cover;
}

.promise .wrapper {
	width: 100%;
	background-color: rgba(0, 0, 0, 0.3);
}

.promise h1 {
	position: relative;
	top: 40px;
	color: white;
	font-family: 'Arvo';
	font-size: 3.5rem;
	text-align: center;
	margin-top: 0;
	word-spacing: 7px;
	text-shadow: 0px 0px 100px grey;
}

.promise p {
	color: white;
	font-size: 1.8rem;
	font-family: 'Rajdhani';
	margin-bottom: 0;
	padding-bottom: 60px;
	text-align: center;
	margin-top: 40px;
	padding-left: 50px;
	padding-right: 50px;
}

/*---FOOTER---*/

.footer .wrapper {
	display: flex;
}

.footer div {
	display: inline-block;
	flex-basis: 33.33%;
	font-family: 'Rajdhani';
	color: rgba(102,102,102, 1);
	margin-top: 5px;
}

.footer h1 {
	font-size: 2rem;
	margin-top: 15px;
}

.footer .inner {
	margin-left: 55px;
}

.social .inner {
	margin-left: 45px;
}

.contact .inner {
	margin-left: 35px;
}

.footer .inner:before {
	display: inline-block;
	content: '';
	width: 27.1%;
	height: 2px;
	background-color: rgba(102,102,102, 0.6);
	position: absolute;
	margin-top: 54px;
}


.links .inner:after {
	content: '';
	width: 10.5%;
	height: 2px;
	background-color: red;
	position: absolute;
	margin-top: -151px;
}

.social .inner:after {
	content: '';
	width: 5.8%;
	height: 2px;
	background-color: red;
	position: absolute;
	margin-top: -171px;
}

.contact .inner:after {
	content: '';
	width: 7.5%;
	height: 2px;
	background-color: red;
	position: absolute;
	margin-top: -174.5px;
}

.wrap:before {
	content: '';
	width: 100px;
	height: 2px;
	background-color: red;
	position: absolute;
	margin-top: 55px;
}

.links a {
	display: block;
	text-decoration-line: none;
	color: rgba(102,102,102, 1);
	font-size: 1.2rem;
	position: relative;
	top: -10px;
	transition: color 0.4s ease;
}

.links a:hover {
	color: red;
}

.contact p {
	position: relative;
	top: -10px;
}

.social i {
	font-size: 1.7rem;
	margin-right: 5px;
	position: relative;
	top: -20px;
	color: rgba(102,102,102, 0.7);
	transition: all 0.4s ease;
}

.social i:hover {
	color: red;
	cursor: pointer;
}

#msg {
	margin-top: -15px;
}

.footer-textarea {
	background-color: rgba(102,102,102, 0.2);
	outline: none;
	color: rgba(102,102,102, 1);
	resize: none;
	width: 100%;
}

.footer button {
	position: absolute;
	margin-left: 23.2%;
	margin-top: -40px;
	border: none;
	font-family: 'Rajdhani';
	font-size: 1.2rem;
	transition: all ease 0.4s;
	outline: none;
}

button:hover {
	cursor: pointer;
	color: red;
}

.dark {
	color: red;
}

.copyright {
	position: absolute;
	background-color: white;
	text-align: center;
	width: 100%;
	margin-bottom: 0;
	font-size: 1.2rem;
	padding-bottom: 4px;
}



/*-------MEDIA QUERIES-------*/



@media screen and (max-width: 1024px) {
	
	/*---FOOTER---*/
	
	.footer .inner {
		margin-left: 30px;
	}

	.footer-textarea {
		width: 88%;
	}

	.footer button {
		margin-left: 22.25%;
	}

	.social .inner:after {
		width: 7.8%;
		margin-top: -80px;
		left: 36.25%;
	}

	.links .inner:after {
		width: 14%;
	}

	.contact .inner:after {
		width: 10%;
	}

}



@media screen and (max-width: 768px) {

	/*---FOOTER---*/

	.contact .inner:after {
		margin-top: -195px;
	}

	.social .inner:after {
		left: 37.25%;
	}

	.footer button {
		margin-left: 20%;
	}
}



@media screen and (max-width: 425px) {

	/*---NAV---*/

	.logo {
		font-size: 2.5rem;
		margin-left: 10px;
	}

	ul {
		margin: 0;
		padding: 0;
	}

	nav li {
		display: none;
	}

	.ham-menu {
		width: 55px;
		height: 55px;
		position: fixed;
		right: 0;
		top: 4px;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.m1, .m2, .m3 {
		border-radius: 4px;
		margin: 4px;
		width: 40px;
		height: 5px;
		background-color: red;
		float: left;
	}

	/*---MAIN---*/

	header {
		height: 50vh;
	}

	.phrase {
		top: 175px;
	}

	.phrase p {
		font-size: 1.7rem;
		margin-bottom: 10px;
	}

	.phrase a {
		font-size: 1.3rem;
		padding: 7px;
	}

	.phrase .fas {
		margin-top: 10px;
		font-size: 2.5rem;
	}

	.stats p {
		font-size: 1.3rem;
	}

	.stats div {
		padding-bottom: 10px;
	}

	.stats div:before {
		height: 20px;
	}

	.promise h1 {
		font-size: 2rem;
	}

	.promise p {
		position: relative;
		top: 10px;
		font-size: 1.3rem;
	}

	/*---FOOTER---*/

	.footer .wrapper {
		display: flex;
		flex-direction: column;
	}

	.footer div {
		margin: 0;
	}

	.footer h1 {
		font-size: 2rem;
		margin-top: 10px;
	}

	.footer .inner {
		margin: 0;
	}

	.footer .inner:before {
		display: inline-block;
		content: '';
		width: 90%;
		height: 2px;
		background-color: rgba(102,102,102, 0.6);
		position: absolute;
		margin-top: 48px;
	}

	.links .inner:after {
		width: 33%;
		margin-top: -152px;
	}

	.social .inner {
		position: relative;
		top: -9.5px;
	}

	.social .inner:after {
		content: '';
		width: 18%;
		height: 2px;
		background-color: red;
		position: absolute;
		left: 0;
		margin-top: -43.75px;
	}

	.contact .inner:after {
		content: '';
		width: 24%;
		height: 2px;
		background-color: red;
		position: absolute;
		margin-top: -148px;
	}

	.links a {
		margin-left: 5px;
	}

	.social h1 {
		margin-bottom: 10px;
	}

	#msg {
		font-size: 1rem;
		margin-bottom: 0;
		margin-right: 25.5%;
		position: absolute;
		right: 5px;
		top: 80px;
	}

	.footer button {
		right: 9.25%;
		margin-top: 0.2px;
	}

	.social i {
		font-size: 1.8rem;
		margin-right: 2px;
		position: relative;
		top: -5px;
		left: 5px;
		color: rgba(102,102,102, 0.7);
		transition: all 0.4s ease;
	}

	.footer-textarea {
		width: 88.5%;
		margin-left: 5px;
	}

	.contact p {
		margin: 5px;
		font-size: 1.2rem;
	}

	.copyright {
		background-color: red;
	}

	.copyright span {
		color: white;
		background-color: red;
	}

}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, intitial-scale=1.0">
	<title>Kane Concrete & Construction LLC</title>
	<link rel="stylesheet" href="../css/style.css">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
	<link href="https://fonts.googleapis.com/css?family=Arvo|Bitter|Lato|Montserrat|Noto+Sans|Open+Sans|Poppins|Roboto|Sarabun|Ubuntu" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Abel|Asap|Krub|Oxygen|Rajdhani|Staatliches|Varela+Round" rel="stylesheet">
</head>
<body>
	<div class="inner-wrap">
		<header>
			<nav>
				<div class="logo">
					<i class="fab fa-accusoft"></i>
				</div>

				<div class="nav">
					<div class="ham-menu">
						<div class="m1"></div>
						<div class="m2"></div>
						<div class="m3"></div>
					</div>
					<ul>
						<li class="after"><a href="index.html">Home</a></li>
						<li class="after"><a href="about.html">About</a></li>
						<li class="after"><a href="about.html#services">Services</a></li>
						<li class="after"><a href="careers.html">Careers</a></li>
						<li class="after"><a href="#">Gallery</a></li>
						<li><a href="#">Contact</a></li>
					</ul>
				</div>
			</nav>
			
			<div class="phrase">
				<p>It all starts at the foundation.</p>
				<a>Get a Quote</a>
				<i class="fas fa-angle-down"></i>
			</div>	
		</header>

		<section class="stats">
			<div id="start-year">
				<p class="stat-info">Established</p><br>
				<p class="stat-num">2015</p>
			</div>

			<div id="projects">
				<p class="stat-info">Projects</p><br>
				<p class="stat-num">200+</p>
			</div>

			<div id="claims">
				<p class="stat-info">Insurance claims</p><br>
				<p class="stat-num">87%</p>
			</div>
		</section>

		<section class="promise">
			<div class="wrapper">
				<h1>Our Promise</h1>

				<p><span style="color: red;">W</span>e believe that Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum doloremque impedit laudantium magnam eos quae ipsum, rem, dolorum saepe laboriosam ipsam nobis architecto debitis, vel aut provident tenetur perferendis, aliquid commodi magni sequi hic quia nemo! Nam odio fugiat, similique eum saepe. Laboriosam officiis delectus reiciendis, est tenetur voluptates ducimus! Ducimus enim dolor, eos id porro, amet culpa alias sunt reprehenderit necessitatibus deserunt eum. Sunt quia accusamus facilis quo, cum maiores nam illum sit quisquam, tempora fugit? Quod voluptate debitis voluptatum illo. Est, rerum sequi. Corporis atque incidunt placeat aliquam error veniam quis, minus voluptatem, qui, a pariatur voluptatibus, ut. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe labore aliquid magnam velit, nisi consequuntur!</p>
			</div>
		</section>
	</div>

	<section class="footer">
		<div class="wrapper">
			<div class="links">
				<div class="inner">
					<h1>Quick Links</h1>

					<a href="#">Home</a>
					<a href="#">About</a>
					<a href="#">Services</a>
					<a href="#">Job Openings</a>
					<a href="#">Gallery</a>
				</div>
			</div>

			<div class="social">
				<div class="inner">
					<h1>Social</h1>

					<i class="fab fa-linkedin"><a href="#" class="social-net"></a></i>
					<i class="fab fa-facebook"><a href="#" class="social-net"></a></i>
					<i class="fab fa-twitter-square"><a href="#" class="social-net"></a></i>

					<p id="msg">Send some feedback!</p>
					<button name="msg">Send</button>
					<textarea name="msg" class="footer-textarea" cols="46" rows="5" placeholder="type here..."></textarea>
				</div>
			</div>

			<div class="contact">
				<div class="inner" class="wrap">
					<h1>Contact</h1>

					<p>(208)546-7827 - <span class="dark">Matt</span></p>
					<p>(208)546-7827 - <span class="dark">Keegan</span></p>
					<p><span class="dark">Address</span> - P.O. Box 50860 IF, ID 83405</p>
					<p><span class="dark">Email</span> - KaneConcrete@fake.com</p>
				</div>
			</div>
		</div>
		
		<div class="copyright"><span>&copy; 2019 - Kane Concrete & Construction | ALL RIGHTS RESERVED</span></div>
	</section>
</body>
</html>

1 Ответ

0 голосов
/ 12 февраля 2019

Похоже, что проблема вызвана различием в вашем CSS.В приведенном вами примере в jsfiddle .footer .inner:before имеет ширину 360px.В приведенном выше коде тот же псевдоэлемент имеет ширину 90%.К сожалению, простое исправление этой проблемы не решит проблему, потому что вы, кажется, применяете целый ряд различных CSS к соответствующей странице.Если вы примените медиа-запрос к странице с другим CSS, вы не всегда получите тот же эффект.Мне кажется, что проблема на вашей странице о программе простирается не только на планшет.

Вам будет лучше использовать одну таблицу стилей для всего сайта, поэтому вам не нужно каждый раз копировать объекты на каждую страницу.Большинство сайтов имеют только одну основную таблицу стилей.

Быстрое решение заключается в добавлении следующего CSS: 

html,
body {
  overflow-x: hidden;
}

Это просто скрывает проблему переполнения и фактически не устраняет основную проблему, однако я не хочупогружаться слишком глубоко в ваш CSS, так как это проблема, которая должна быть решена путем создания непротиворечивого колонтитула CSS.

...