Как исправить адаптив?

Question

[Ferum1]

Только пробую верстать, подскажите, блок навигации nav-wrapper при размере экрана выше 1070 пикселей меняет свойства как нужно, а вот с блоком header-wrapper проблема, меняет только падинги, а изменение фона и ширина, зачеркиваются. В чем дело? скрин

<div class="nav-wrapper">
	
				<a  href="#" class="logo">
					<img src="img/logotip.png" alt="image">
				</a>
						
			<div class="nav">
				<a href="#" class="nav__item">home</a>
				<a href="#" class="nav__item">about </a>
				<a href="#" class="nav__item">blog</a>
				<a href="#" class="nav__item">contact</a>
			</div>
</div>


		<div class="header-wrapper>
					<h1 class="header-title">Long Beach </h1>
					<p class="header-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor<br/> incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
		</div>

.nav-wrapper{
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 80px;
	padding-top: 54px;
	padding-left: 20px;
	padding-right: 20px;	
	background-color: yellow;
	display: flex;
	/*justify-content: space-between;*/
	justify-content: center;
	align-items: baseline;
}

.nav{
	display: none;
}

.header-wrapper{
	width: 100%;
	padding-left: 20px;
	padding-right: 20px;
	margin-left: auto;
	margin-right: auto;
	background-color: #f2f0fb;
}
.header-title{
  font-size: 40px;
   line-height: 1.4;
  font-weight: lighter;
  text-align: center
 
}

.header-description {
  color:#bfbfbf;
  font-family:'Lato', sans-serif;
  font-size: 15px;
  line-height: 1.875;
  margin-top: 15px;
  text-align: center;
  padding-bottom: 100px;
}


@media (min-width:620px){
	
	.nav-wrapper{
	padding-top: 74px;	
		margin-bottom: 50px;
		justify-content: space-between;

	}
	.nav{
		display: block;
	}
	
}

@media (min-width: 1070px){

	.nav-wrapper{
		padding-top: 94px;
       background-color: orange;
		padding-left: 0;
		padding-right: 0;
		margin-bottom: 70px;

	}	
}

@media (min-width: 1070px){

	.header-wrapper{
		width: 1030px;
		padding-top: 94px;
       background-color: green;
       margin-top: 120px;
		padding-left: 0;
		padding-right: 0;

	}	
}

">

Answer 1

[FeST1VaL]

В условии media запроса проверяй... У тебя все расширения до 1070px имеют стиль из media запроса, а когда ниже то media запрос уже не работает.

Возможно ты имел ввиду что у тебя начиная от 1070px и ниже должен приниматься стиль? тогда не min-width: 1070px, а max-width: 1070px.

А nav-wrapper нормально работает, тк у тебя стоит от 620px до 1070px

Comments

[Ferum1]

Я хотел проверить, работает ли медиа запрос у heder-wrapper при ширине 1070 и выше, путём изменения бекграунда, но он зачёркивается и остаётся прежний цвет фона. Для header-wrappper указаны стили которые применяются ниже 1070px, а в медиа запроса выше 1070, так вот когда Ширина переваливает за 1070 пикселей из всех свойств работает только паддинг, а фиксированная ширина и фон вычёркиваются

[FeST1VaL]

Ferum1, Так вы когда выкладывали вопрос, изменили стили...
Судя по скриншоту у вас media запрос идет в самом начале файла, а основные стили ниже... в этом и проблема... нижний стиль перекрывает верхний

И в следующий раз выкладывайте с песочницей...
Это поидее так должно же быть? https://jsfiddle.net/fest1val/q7w8vkeu/

[Ferum1]

Артем Будин, спасибо, ты мне очень помог