медиа-запросы противоречат друг другу

Question

Эй, друзья, я пишу медиа-запрос для нижнего колонтитула моего сайта.Я начинаю с максимальной ширины 425 пикселей.Первое, что запутывается, когда я уменьшаю экран до этого размера, показано здесь - Красная линия не складывается, поэтому я настраиваю и исправляю ее, но когда я уменьшаю экрандо максимальной ширины 375 пикселей красная линия снова перемещается, поэтому я создаю еще один медиа-запрос с максимальной шириной 375 пикселей и настраиваю линию и фиксирую ее на 375, но теперь, когда я перемещаю экран обратно до 425, эта линия перемещаетсяснова?полностью игнорируя этот стиль.Так что я должен снова его настроить.Но это тогда портит это в 375 ???Что происходит?Это помощь туда и обратно. Пример ниже

Первое, что я делаю, когда меняю размер экрана до 425px и вижу проблему (как показано на рисунке

`@media screen and (max-width: 425px) {
    .social .inner:after {
        margin-top: -40px;
  }
}`

Приведенный выше код выравниваеткрасная линия, где она должна быть, когда максимальная ширина экрана составляет 425 пикселей. Однако, когда я уменьшаю экран до 375 пикселей, линия снова перемещается, поэтому, возможно, я делаю что-то вроде этого

`@media screen and (max-width: 375px) {
   .social .inner:after {
       margin-top: -38px;
   }
}`

Это исправляет 375 пикселей.Что теперь происходит, хотя, когда я возвращаюсь к 425px, линия снова перемещается? И затем, если этого было недостаточно, если вы уменьшаете его до 375px, его смещение выравнивается ??? Попробуйте и посмотрите

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

/*---HEADER---*/

header {
	background-image: url(../img/contact.jpg);
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	width: 100%;
	height: 65vh;
}

.contact-wrapper{
	width: 100%;
	height: 65vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: rgba(0, 0, 0, 0.2);
}

header h1 {
	color: white;
	font-size: 5rem;
	font-family: 'Arvo';
	margin: 0;
}

/*---NAV---*/

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;
}

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

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;
}

/*---MAIN---*/

.contact h2 {
	font-family: 'Rajdhani';
	color: rgba(102,102,102, 0.85);
	font-size: 3rem;
	text-align: center;
	margin-top: 20px;
	margin-bottom: 10px;
}

.contact h2:after {
	content: '';
	width: 18px;
	height: 2px;
	background-color: red;
	display: inline-block;
	margin-left: 5px;
	margin-bottom: 13px;
}

.contact h2:before {
	content: '';
	width: 18px;
	height: 2px;
	background-color: red;
	display: inline-block;
	margin-right: 5px;
	margin-bottom: 13px;
}

.quote-info {
	display: flex;
	flex-direction: column;
	width: 30%;
	margin: 20px;
	background-color: rgba(102, 102, 102, 0.2);
	margin-bottom: 15px;
}

.quote-info input, .quote-info textarea {
	width: 85%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 17px;
	font-family: 'Rajdhani';
	font-size: 1.2rem;
}

.quote-info p {
	color: rgb(102, 102, 102);
	text-align: center;
	font-size: 1.45rem;
	font-weight: bolder;
	font-family: 'Rajdhani';
	margin-bottom: 0;
}

.quote-info .send-quote {
	width: 85%;
	background-color: red;
	margin-bottom: 20px;
	margin-left: auto;
	margin-right: auto;
	font-size: 1.2rem;
	color: white;
	font-family: 'Rajdhani';
	border: none;
	outline: none;
	padding: 5px;
}

.send-quote:hover {
	transition: all 0.5s ease;
	background-color: #cc0000;
}

textarea {
	resize: none;
}

hr {
	width: 100%;
	color: rgba(102, 102, 102);
}

.contact .container {
	display: flex;
}

.contact-info h3 {
	color: rgb(102, 102, 102);
	font-size: 2.3rem;
	margin-left: 25px;
	font-family: 'Rajdhani';
	margin-bottom: 0;
}

.contact-info h3:after {
	content: '';
	height: 1.5px;
	display: inline-block;
	background-color: grey;
	width: 340%;
	position: relative;
	top: -30px;
}

.contact-numbers div {
	margin-left: 30px;
	font-family: 'Rajdhani';
	font-size: 1.35rem;
}

.contact-numbers i {
	color: red;
}

/*---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: 102%;
}

.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: 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: 35px;
		height: 3px;
		background-color: red;
		float: left;
	}

	/*---MAIN---*/

	header h1 {
		font-size: 3rem;
	}

	.quote-info {
		width: 90%;
	}

	.quote-info p {
		position: relative;
		top: 2px;
	}

	.contact .container {
		flex-direction: column;
	}

	.contact-info h3 {
		margin-top: 0;
	}

	.contact-info h3:after {
		width: 95%;
	}

	.contact-numbers {
		margin-top: -15px;
	}

	/*---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: 100%;
		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: -10px;
	}

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

	.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-top: 5px;
		margin-left: 5px;
	}

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

	.copyright {
		background-color: red;
	}

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

}

@media screen and (max-width: 375px) {
	.social .inner:after {
		margin-top: -36.5px;
		width: 20%;
	}

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

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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, intitial-scale=1.0">
	<title>Contact | Kane Concrete & Construction LLC</title>
	<link rel="stylesheet" href="../css/contact.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>
	<header>
		<div class="contact-wrapper">
			<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><a href="contact.html">Contact</a></li>
					</ul>
				</div>
			</nav>

			<h1>Contact Us</h1>
		</div>	
	</header>

	<section class="contact">
		<h2>Get in touch</h2>

		<div class="container">
			<div class="quote-info">
				<p>Get a Quote</p>

				<input type="text" placeholder="First Name">
				<input type="text" placeholder="Last Name">
				<input type="text" placeholder="Phone Number">
				<input type="text" placeholder="Email">

				<textarea name="project-details" id="" cols="40" rows="7" placeholder="Give us the specifics on your project"></textarea>

				<button class="send-quote">Send</button>
			</div>

			<div class="contact-info">
				<h3>Contact info</h3>

				<div class="contact-numbers">
					<div>
						<i class="fas fa-phone"></i>
						<p>(208)546-7827 -Matt</p>
						<i class="fas fa-phone"></i>
						<p>(208)546-7827 -Keegan</p>
					</div>

					<div>
						<i class="fas fa-envelope"></i>
						<p>P.O. Box 50860 IF, ID 83405</p>
						<i class="fas fa-at"></i>
						<p>KaneConcrete@fake.com</p>
					</div>
				</div>
			</div>
		</div>
	</section>

	<hr>
	
	<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="about.html#services">Services</a>
					<a href="careers.html">Careers</a>
					<a href="contact.html">Contact</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="45" 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>

Answer 1

Я не мог воспроизвести проблему здесь (или я не понял ее полностью).Но позвольте мне указать на некоторые возможные проблемы с кодом CSS:

Чтобы создать красные линии, вы создаете элемент после содержимого разделов.Чтобы отрегулировать позицию, вы устанавливаете поле на отрицательное значение.Это проблематично, поскольку размер сечения не является постоянным, поэтому красная линия будет иметь вид неопределенной позиции (на самом деле это нижняя часть сечения минус несколько пикселей).

Вы можете установить поле на 0проверить, насколько изменчив размер раздела (он будет меняться при переносе строки, при изменении шрифта, например, от браузера к браузеру и т. д.).Вместо этого я рекомендую использовать естественный поток и добавить строку, где его позиция.Простым примером может быть:

header {
  width: 300px;
}

h1 {
  margin: 0;
  margin-bottom: 10px;
}

.line {
  height: 2px;
  background: black;
}

.red-line {
  height: 2px;
  background: red;
  width: 30%;
  margin-top: -2px;
}

<header>
  <h1>Quick Links</h1>
  <div class="line"></div>
  <div class="red-line"></div>
</header>

Отрицательное поле здесь работает, потому что .red-line всегда будет на 2 пикселя ниже .line.

Cya!