С Новым годом! Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 5.00/11: Рейтинг темы: голосов - 11, средняя оценка - 5.00
0 / 0 / 0
Регистрация: 15.11.2017
Сообщений: 3
1

Медиа запросы и flexbox

15.11.2017, 18:16. Показов 2145. Ответов 1
Метки css, html (Все метки)

Author24 — интернет-сервис помощи студентам
Здравствуйте. Столкнулся с проблемой медиа запросов. При изменении размера браузера не выполняется flex-wrap. В чем я ошибся?
HTML-разметка.
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="Описание сайта">
    <meta name="keywords" content="Ключевые слова">
 
    <link rel="stylesheet" href="style.css" type="text/css">
    <script src=""></script>
 
 
    <title>Document</title>
</head>
<body>
    <header class="grid">
        <div class="ex grid">
            <div class="cont grid">Пример
                
            </div>
            <div class="cont grid">Пример2
                
            </div>
            <div class="cont grid">Пример3
                
            </div>
            <div class="cont grid">Пример4
                
            </div>
        </div>
    </header>
    <div class="all">
        <div class="panel">
            <div>But</div>
            <div>But2</div>
        </div>
        <div class="maincontent">
            <div class="field">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum nam explicabo voluptate dolores, doloribus voluptatum distinctio cum molestiae vel! Dignissimos quasi tenetur repellat repellendus voluptatum ratione quod, quisquam ullam ut. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos odit beatae asperiores, assumenda fuga omnis sapiente recusandae possimus, nihil hic est distinctio ipsam eius sunt inventore voluptatibus ad doloremque, necessitatibus! Quisquam reiciendis, earum quo sunt error, quis dolorum blanditiis pariatur sapiente repellendus neque debitis excepturi numquam ipsa quibusdam. Doloribus dolorum similique libero. Deserunt quod nam blanditiis quasi est, voluptatem illum! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit fuga omnis numquam, enim quas quia delectus deserunt. Dolorem dicta aliquam iure ipsa ea, neque odit saepe iusto. Recusandae accusantium incidunt, quisquam rerum, sit magni, totam dolores saepe optio porro quaerat enim quam hic repellat dicta, deserunt molestiae earum a! Dicta modi ipsa adipisci ipsum ea at hic numquam ex vel ad quas accusantium unde minima autem maiores ratione laborum veritatis velit, nemo reprehenderit, vero dolor? Ratione magnam sit quaerat, hic sequi, eveniet minima, architecto sint ullam nemo a cum consequatur aut debitis ab iusto eum quisquam, perspiciatis doloremque harum earum eos! Repellendus cupiditate blanditiis inventore quos, non, amet doloremque dignissimos soluta molestiae quasi, molestias dolorum optio. Laborum ea ratione perspiciatis amet ducimus iste repellendus esse debitis aperiam voluptatem temporibus aspernatur cupiditate fuga, inventore corporis. Provident amet cumque dolorem sed porro quae accusantium obcaecati quis, dolorum architecto commodi in fugiat totam atque natus laboriosam quaerat aliquam magni modi optio quas dolores impedit odit. </p>
            </div>
            <div class="right-bar grid">
                <div class="slider">Slider</div>
                <div class="links">Links</div>
            </div>
        </div>
    </div>
</body>
</html>
CSS стили.
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
.grid {
    display:grid;
    /*grid-column-gap: 5px;/*Отступы между ячейками*/
    
}
 
header {
    max-width: 1200px;
    min-width: 320px;
    margin: 0 auto;
}
.ex {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr 1fr;
    grid-gap: 5px;
    
    color: #fff;
    
}
.cont{
    //margin:4px;
    background-color: black;
    width:100%;
}
.cont:nth-child(1) {
    grid-column: 1/2;
    grid-row: 1/3;
    justify-items: center;
    align-items: center;
}
 
.cont:nth-child(2) {
    grid-column: 2/4;
    grid-row: 1/2;
    justify-items: center;
    align-items: center;
}
.cont:nth-child(3) {
    grid-column: 2/4;
    grid-row: 2/3;
    justify-items: center;
    align-items: center;
}
.cont:nth-child(4) {
    grid-column: 4/5;
    grid-row: 1/3;
    justify-items: center;
    align-items: center;
}
 
.all{
    display: flex;
    max-width: 1200px;
    min-width: 220px;
    margin: 0 auto;
    margin-top: 50px;
}
.panel {
    padding: 2em 0;
    width: 30px;
}
.maincontent {
    display: flex;
    max-width:1170px;
    min-width: 290px;
}
 
.field {
    max-width:900px;
    min-width:400px;
    background-color: red;
    margin-right: 10px;
    flex-grow:1;
}
.field>p {
    padding:1em 3em;
}
.right-bar {
    width:270px;
    min-width: 200px;
    flex-grow:1;
    display: flex;
    flex-direction: column;
    
.slider {
    background-color: grey;
    //flex-grow:1;
    width: 100%;
    height: 100px;
}
.links {
    margin-top: 10px;
    background-color: purple;
    //flex-grow:1;
    width: 100%;
    height: 200px;
    }
.block {
    display: flex;
    width: 1200px;
    margin: 0 auto;
    flex-wrap: wrap;
    flex-direction: row;
    }
.blo {
        min-width: 150px;
        background-color: pink;
        margin: 5px;
        flex-grow:1;
    }
 
@media only screen and (max-width: 450px) {
    .maincontent {
        flex-direction: column;
        flex-wrap: wrap;
    }
    .field {
        max-width: 450px;
        margin-right: 0;
    }
    .right-bar {
        margin-top: 10px;
        flex-direction: column;
        flex-wrap: column-wrap;
    }   
    .slider {
        width:100%;
        height: 100%;
    }   
    .links {
        width: 100%;
        margin-top: 0;
        margin-left: 2%;
        height: 100%;
    }
}
@media only screen and (max-width: 768px) {
    .maincontent {
        flex-wrap: wrap;
    }
    .field {
        margin-right: 0;
    }
    .right-bar {
        margin-top: 10px;
        flex-direction: row;
        flex-wrap: wrap;
    }   
    .slider {
        width:49%;
        height: 100%;
    }   
    .links {
        width: 49%;
        margin-top: 0;
        margin-left: 2%;
        height: 100%;
    }
}
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
15.11.2017, 18:16
Ответы с готовыми решениями:

Медиа-запросы
Добрый вечер! подскажите пожалуйста! можно ли сделать что на компьютере была видна ссылка а на...

Медиа запросы
Какие брейкопоинты медиа запросов сейчас актуальны? Гуглил, но нашел только инфу 3-х летней...

Медиа-запросы и размеры
Здравствуйте. На сайте используется несколько медиа-запросов, которые позволяют корректно...

Не работают медиа-запросы
Код HTML: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Новый препарат &lt;/title&gt; &lt;link...

1
84 / 81 / 42
Регистрация: 20.01.2017
Сообщений: 219
16.11.2017, 12:34 2
на 84 строчке в стилях поставьте закрывающую скобку }
1
16.11.2017, 12:34
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
16.11.2017, 12:34
Помогаю со студенческими работами здесь

Не работают медиа запросы
Всем доброго времени суток. У меня возникла непонятная для меня проблема. Никогда не занимался...

Не срабатывают медиа запросы
Здравствуйте! Возникла такая проблема, не срабатывает медиа запрос! Если ширина браузера меньше...

Не работают медиа-запросы
Мдемс, есть вот такой css3 код : .slidershow { float: left; clear: both; position: relative;...

Не работают медиа-запросы
Доброго времени суток, уважаемые. Во время адаптивной верстки через медиа-запросы столкнулся с...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru