Не работают медиа запросы

@Limongrass · Регистрация: 07.11.2017

Author24 — интернет-сервис помощи студентам

Почему-то не работают медиа запросы. Вроде все написала правильно, но все равно где-то есть ошибка. Помогите найти, где она зарыта)

CSS

section {
    width: 100%;
    height: 40px;
    background-color: #232323;
}
 
section p {
    width: 140px;
    color: #ffffff;
    font-family: 'LibreFranklin-Medium', sans-serif;
    font-size: 12px;
}
 
.fa {
    color: #ffffff;
    font-size: 13px;
    margin: 12.5px 4px;
}
 
.fa.fa-facebook {
    margin-left: 15px;
}
 
div#contacts {
    width: 600px;
    height: 200px;
    display: inline;
}
 
.fa.fa-phone, .fa.fa-envelope-o {
    margin: 0px;
    margin-right: 5px;
}
 
.fa.fa-phone{
    margin-left: 915px;
}
 
.fa.fa-phone, .fa.fa-envelope-o, div#contacts p {
    display: inline-block;
}
 
@media (max-width : 768px) {
    .fa.fa-phone{
    margin-left: 283px;
    }
    section {
    background-color: #5F5C30;
    }
}

А в html прописала:

HTML5

1	<meta name="viewport" content="width=device-width, initial-scale=1.0">

@Freeze_Breeze · 12.05.2018, 19:37

Limongrass, а CSS подключили

Так же было бы неплохо приложить HTML разметку, может Вы селекторы не правильно используете. Вообщем смотрите, если у Вас возникает ошибка в коде, Вы можете сами посмотреть что не так с CSS или HTML файлом, для этого нужно в браузере (Google Chrome) нажать F12 и у Вас откроется окошко с средствами разработчика и там Вы сможете посмотреть ошибку.

@aj17 · 12.05.2018, 23:25

Сообщение от Limongrass

Помогите найти, где она зарыта)

А meta добавили в head сайта для адаптива?

Пример:

HTML5

1	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

@Fedor92 · 12.05.2018, 23:53

aj17, под CSS в первом посте ТС...

@aj17 · 12.05.2018, 23:56

Fedor92, ага, не заметил...

@Fedor92 · 12.05.2018, 23:58

Limongrass, надо полагать из-за лишних пробелов, которые Вы в css наставили... Попробуйте так:

CSS

1	@media (max-width:768px){стили...}

@Goshanbo · 13.05.2018, 09:44

Добрый день.
Смоделировал медиазапрос на codepen, вроде все работает : https://codepen.io/Goshanbo/pe... itors=1100
Передвигая полосу разделяющую секции кода и экран результата - можно изменять ширину экрана результата, тем самым убедиться, что медиазапрос работает.

HTML5

1
2
3

<section></section>
<div class="fa fa-phone">fa fa-phone</div>
<!-- Передвигая полосу разделяющую секции кода и экран результата - ты изменяешь ширину экрана результата -->

CSS

div{border: solid red;}
section {
    width: 100%;
    height: 40px;
    background-color: #232323;
}
.fa.fa-phone, .fa.fa-envelope-o {
    margin: 0px;
    margin-right: 5px;
}
.fa.fa-phone{
    margin-left: 915px;
}
 .fa.fa-phone, .fa.fa-envelope-o, div#contacts p {
    display: inline-block;
}
@media (max-width : 768px) {
    .fa.fa-phone{
    margin-left: 283px;
    }
    section {
    background-color: #5F5C30;
    }
}

Скачайте себе zip этого примера и рассмотрите код, сравните со своим, так вы сможете понять в чём проблема.

Ну или пишите сюда.

@Freeze_Breeze 278 / 272 / 106 Регистрация: 12.01.2016 Сообщений: 1,666
	12.05.2018, 19:37	2
	Limongrass, а CSS подключили Так же было бы неплохо приложить HTML разметку, может Вы селекторы не правильно используете. Вообщем смотрите, если у Вас возникает ошибка в коде, Вы можете сами посмотреть что не так с CSS или HTML файлом, для этого нужно в браузере (Google Chrome) нажать `F12` и у Вас откроется окошко с средствами разработчика и там Вы сможете посмотреть ошибку. 0

@Fedor92 2964 / 2619 / 1068 Регистрация: 15.12.2012 Сообщений: 9,974 Записей в блоге: 11
	12.05.2018, 23:53	4
	aj17, под CSS в первом посте ТС... 0

@aj17 333 / 309 / 168 Регистрация: 02.06.2014 Сообщений: 1,130
	12.05.2018, 23:56	5
	Fedor92, ага, не заметил... 0

	13.05.2018, 09:44

Опции темы