Почему нет адаптивности на сайте

@NikitaDen3 · Регистрация: 23.03.2018

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

вот мой код

HTML5

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="../public/css/style.css">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
    <script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" integrity="sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl" crossorigin="anonymous"></script>
    <meta name="viewport" content="width=device-width, minimum-scale=1.0" >
 
    <title>Главная</title>
</head>
<body>
    <div class="content">
        <header>
            <div class="top_text">
                <div class="top_text_left">
                    <a href="/"><span class='active'>Главная</span></a>
                    <a href="/"><span>Рекомендации по сайту</span></a>
                    <a href="/"><span>Поддержка </span></a>
                    <a href="/"><span>Информация</span></a>
                </div>
                <div class="top_text_right">
                    <span id='avt'>Авторизация</span>
                </div>
            </div>
            <ul class='menu'  id='menu'>
                <li id="news" class='active'>Новости</li>
                <li id="food" class=''>Питание</li>
                <li id="dejurstwo" class=''>График дежурства</li>
                <li id="about" class=''>О сайте</li>
                <li id="back_sw" class=''>Обратная связь</li>
                <li id='menu' class='icon'>☰</li>
            </ul>   
        </header>

CSS

$active : #3af
 
*
    margin: 0 
    padding: 0
a 
    text-decoration: none
    color: #fff
body 
    background: #f5f5f5
    font-size: 1.000em
    color: #5b666a
    font-family: 'Open Sans'
    font-weight:  400px
header 
    background: #fff
    color: #000
    overflow: hidden
    
    font-weight: normal
    font-size: 1.250em
.top_text
    background: $active
    height: 70px
    color: #fff
    width: 100%
    padding: 0 35px 0 35px
    box-sizing: border-box
.top_text_left
    display: flex
    align-items: center
    height: 70px 
    float: left
.top_text_left span 
    margin-right: 50px
.active 
    font-size: 137,5%
    color: red
.top_text_right
    float: right
    display: flex
    align-items: center
    height: 70px
    color:#fff
ul 
    display: flex
    justify-content: center
    background: #f5f5f5
    border-top: 1px solid #5f5d67
    border-bottom: 1px solid #5f5d67
    height: 30px
li 
    float: left
    list-style: none
    height: 30px
    width: 15%
    display: flex
 
    color: #5f5d67
.icon 
    display: none
@media screen and (max-width: 700px)  
  li:not(.active)
    display: none

Но li пропадают только при ширине 552px . В чем дело ?

@AlexZaw · 01.04.2018, 12:18

Все прекрасно пропадает на 700px, разбирайтесь с вашим браузером

@NikitaDen3 · 01.04.2018, 12:29 **[ТС]**

Я проверил в chrome , microsoft edge , mozila web edition , opera везде одно и тоже.

Добавлено через 3 минуты
Может эта проблема в open server ?

@AlexZaw · 01.04.2018, 12:34

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

Может эта проблема в open server ?

Что бы это проверить вам нужно наше разрешение?

Dmitry · 01.04.2018, 12:36

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

Может эта проблема в

...в мобильном устройстве?

@Freeze_Breeze · 01.04.2018, 12:52

<meta name="viewport" content="width=device-width, minimum-scale=1.0" > - эта строчка пишется после этой <meta charset="UTF-8">
<title>Главная</title> пишется перед всеми подключаемыми файлами <link>
<script></script> - подключается либо в конце HTML файла перед закрывающем тегом </body> либо в конце закрывающего тега </head>, а кстати, где Ваш закрывающий тег </body>?
Где закрывающий тег <div class="content">?
Почему код написан не елочкой, а черт пойми как, что не понять, не разобрать.
Почему Вы используете сначала препроцессор и спрашиваете об адаптивности, неужели нельзя использовать обычный CSS?

Почему нет адаптивности на сайте

Потому, что у Вас иерархия кривая... Фу фу фу, ужасный код, ужасный...

@AlexZaw · 01.04.2018, 19:27

Freeze_Breeze,

Не по теме:

Мало того что в вашем ответе нет ответа на поставленный вопрос, так еще и вводите в заблуждение. Порядок мета-тегов, местоположение тегов title и script - не принципиальны, закрывающие теги в примере возможно просто не скопировались, и опять же они не принципиальны для понимания вопроса, вопрос про написание кода излишен, пускай хоть в одну строку пишет человек, хоть uglify использует, на работоспособность это не влияет. Вопрос про препероцессоры вообще непонятен, чем вам препроцессоры не угодили? Ваш ответ про кривую иерархию это совсем уж бред... Если нечего сказать по делу, лучше ничего не говорите, не в первый раз замечаю за вами подобные ответы...

@Freeze_Breeze · 01.04.2018, 21:14

AlexZaw,

Не по теме:

Пуская человек уже с начала учится писать красивый и валидный код, что бы его читать было приятно глазу а не все в одну строчку и под один абзац.

@SiarheiSiarhei · 02.04.2018, 08:41

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

@media screen and (max-width: 700px)

Так там все от "балды" почему 700 = "отсебятина" и на фига

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

препроцессор

когда собаке "не фиг делать ... она что ....?"...

@AlexZaw Модератор 2351 / 1719 / 668 Регистрация: 07.08.2016 Сообщений: 4,049
	01.04.2018, 12:18	2
	Сообщение было отмечено NikitaDen3 как решение Решение Все прекрасно пропадает на 700px, разбирайтесь с вашим браузером 0

@NikitaDen3 0 / 0 / 0 Регистрация: 23.03.2018 Сообщений: 12
	01.04.2018, 12:29 [ТС]	3
	Я проверил в chrome , microsoft edge , mozila web edition , opera везде одно и тоже. Добавлено через 3 минуты Может эта проблема в open server ? 0

@AlexZaw Модератор 2351 / 1719 / 668 Регистрация: 07.08.2016 Сообщений: 4,049
	01.04.2018, 12:34	4
	Сообщение от NikitaDen3 Может эта проблема в open server ? Что бы это проверить вам нужно наше разрешение? 0

Dmitry 13357 / 7489 / 820 Регистрация: 09.09.2009 Сообщений: 29,286
	01.04.2018, 12:36	5
	Сообщение от NikitaDen3 Может эта проблема в ...в мобильном устройстве? 0

@Freeze_Breeze 278 / 272 / 106 Регистрация: 12.01.2016 Сообщений: 1,666
	01.04.2018, 12:52	6
	`<meta name="viewport" content="width=device-width, minimum-scale=1.0" >` - эта строчка пишется после этой `<meta charset="UTF-8">` `<title>Главная</title>` пишется перед всеми подключаемыми файлами `<link>` `<script></script>` - подключается либо в конце HTML файла перед закрывающем тегом `</body>` либо в конце закрывающего тега `</head>`, а кстати, где Ваш закрывающий тег `</body>`? Где закрывающий тег `<div class="content">`? Почему код написан не елочкой, а черт пойми как, что не понять, не разобрать. Почему Вы используете сначала препроцессор и спрашиваете об адаптивности, неужели нельзя использовать обычный CSS? Почему нет адаптивности на сайте Потому, что у Вас иерархия кривая... Фу фу фу, ужасный код, ужасный... 0

@AlexZaw Модератор 2351 / 1719 / 668 Регистрация: 07.08.2016 Сообщений: 4,049
	01.04.2018, 19:27	7
	Freeze_Breeze, Не по теме: Мало того что в вашем ответе нет ответа на поставленный вопрос, так еще и вводите в заблуждение. Порядок мета-тегов, местоположение тегов title и script - не принципиальны, закрывающие теги в примере возможно просто не скопировались, и опять же они не принципиальны для понимания вопроса, вопрос про написание кода излишен, пускай хоть в одну строку пишет человек, хоть uglify использует, на работоспособность это не влияет. Вопрос про препероцессоры вообще непонятен, чем вам препроцессоры не угодили? Ваш ответ про кривую иерархию это совсем уж бред... Если нечего сказать по делу, лучше ничего не говорите, не в первый раз замечаю за вами подобные ответы... 0

@Freeze_Breeze 278 / 272 / 106 Регистрация: 12.01.2016 Сообщений: 1,666
	01.04.2018, 21:14	8
	AlexZaw, Не по теме: Пуская человек уже с начала учится писать красивый и валидный код, что бы его читать было приятно глазу а не все в одну строчку и под один абзац. 0

@SiarheiSiarhei 26 / 36 / 15 Регистрация: 15.01.2017 Сообщений: 311
	02.04.2018, 08:41	9
	Сообщение от NikitaDen3 @media screen and (max-width: 700px) Так там все от "балды" почему 700 = "отсебятина" и на фига Сообщение от Freeze_Breeze препроцессор когда собаке "не фиг делать ... она что ....?"... 0

Почему нет адаптивности на сайте

Решение