Медиазапросы противоречат друг другу
Привет, друзья, я пишу медиа-запрос для нижнего колонтитула моего сайта. Я начинаю с максимальной ширины 425 пикселей. Первое, что портится, когда я сжимаю экран до этого размера, показано здесь -
Красная линия не складывается, поэтому я настраиваю и исправляю ее, но когда я сжимаю экран до максимальной ширины 375 пикселей, красная линия снова перемещается, поэтому я создаю еще один медиа-запрос с максимальной шириной 375 пикселей, настраиваю линию и фиксирую ее на 375, но теперь, когда я перемещаю экран обратно на 425, эта линия снова перемещается? полное игнорирование этого стиля. Так что я должен настроить его снова. Но тогда это портит его на 375 ??? Что творится? Это туда и обратно, пожалуйста, помогите - пример ниже
Первое, что я делаю, когда изменяю размер экрана до 425 пикселей и вижу проблему (как показано на картинке
`@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;
}
}`
Это фиксируется на 375px. Что теперь происходит, когда я возвращаюсь к 425px, линия снова перемещается? а затем, если этого было недостаточно, если вы уменьшите до 375 пикселей, это сместится??? Попробуйте и посмотрите
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>[email protected]</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> - [email protected]</p>
</div>
</div>
</div>
<div class = "copyright"><span>© 2019 - Kane Concrete & Construction | ALL RIGHTS RESERVED</span></div>
</section>
</body>
</html>хорошо, только что добавил. Можете ли вы помочь мне?
—
03.03.2019 03:27
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
1
2
84
1
Ответы 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.
Циа!
Другие вопросы по теме
Как сделать так, чтобы логотип перемещался в левую часть страницы при переключении с мобильного устройства на экран планшета и компьютера?
Bootstrap Grid, свернуть на 750px
Css - изображение на мобильном устройстве нарушено
Распечатать содержимое <iframe>, превышающее одну страницу
Мобильное разрешение — это больше, чем разрешение рабочего стола, но все же то, как медиа-запросы отображают мобильный веб-сайт
Адаптивные таблицы — упаковка или альтернативы
Размер страницы с условием
Подходящий CSS для flexbox в запросе @media
Как я могу применить один из нескольких классов к элементу, зависящему от медиа-запроса, без дублирования кода?
Насколько глубоко вы можете вкладывать медиа-запросы?
Похожие вопросы
Можете ли вы перезаписать внутренний <div> с помощью «display: inline»
Как установить фоновое изображение в Ionic 4
Как заставить нижний колонтитул не блокировать раздел div в HTML?
Скрыть div при втором клике
Bootstrap 4 Полноэкранный рабочий стол — столбцы заполняют оставшееся пространство
Текст кнопки размыт, когда css переводится при наведении
Кнопка сворачивания панели навигации Bootstrap не работает
Вывод результатов поиска jquery ajax
Развернуть столбец Bulma по горизонтали после окончания другого столбца
Создание динамической таблицы лидеров с фотографиями профиля
Я предлагаю вам предоставить пример минимальный, полный и проверяемый для этого вопроса.