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

Почему не работает медиазапрос?

09.04.2023, 11:17. Показов 330. Ответов 1
Метки css, grid css, html, mediascreen (Все метки)
Author24 — интернет-сервис помощи студентам
Я использовал display:grid чтобы создать сетку. Хотел её адаптировать через media queries, но по какой то причине медиа запросы не работают. Что нужно исправить чтобы мои медиа запросы работали?

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
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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, inital-scale=1.0">
        <link rel="stylesheet" href="styles.css">
        <title>Главная</title>
    </head>
    <body>
        <div class="wrapper">
            <header class="header">
                <div class="container">
                    <div class="header__body">
                        <div class="header__body_picture">
                            <img src="phot/logo.png">
                        </div>
                        <div class="header__body_text">
                            <h3>МБОУ СОШ №103</h3>
                            <p>г.Барнаул, Алтайский Край</p>
                        </div>
                    </div>
                    <div class="header__menu">
                        <ul class="header__menu_spisok">
                            <li class="menu_li"><a href=index.html>Главная</a></li>
                            <li class="menu_li"><a href=index.html>Комната</a></li>
                            <li class="menu_li"><a href=index.html>Галерея</a></li>
                            <li class="menu_li"><a href=index.html>Предмет</a></li>
                            <li class="menu_li"><a href=index.html>Тест</a></li>
                        </ul>
                    </div>
                    <hr>
                </div>
            </header>
            <main class="main">
                <div class="container">
                    <div class="main__body">
                        <div class="main__body_picture">
                            <img src="phot/shk.jpg" class="main__body_picture_shkola">
                        </div>
                        <div class="main__body_textandvuzi">
                            <div class="main__body_text">
                                <p>Муниципальное бюджетное общеобразовательное учреждение "Средняя общеобразовательная школа №103" города Барнаула - учебное заведение, образованное в 1923 году. Наша цель - гармоничное развитие личности учащегося с учетом его возраста, интеллекта и интересов, а также выявление и раскрытие природных способностей каждого ученика. </p>
                            </div>
                            <div class="main__body_vuzi">
                                <img src="phot/zist.png">
                            </div>
                        </div>
                        <div class="main__body_result">
                            <h3>Результаты школы:</h3>
                        </div>
                        <div class="main__body_result_picture">
                            <img src="phot/rez.png">
                        </div>
                    </div>
                </div>
            </main>
            <footer class="footer">
                <div class="container">
                    <div class="footer_body">
                        <hr>
                        <div class="main__body_contacts">
                            <div class="main__body_contacts_phone">
                                <h4 class="main__body_contacts_phone_text">Телефон:</h4>
                                <h4>8(3852) 226-439</h4>
                            </div>
                            <div class="main__body_contacts_fax">
                                <h4 class="main__body_contacts_fax_text">Факс:</h4>
                                <h4>8(3852) 226-439</h4>
                            </div>
                            <div class="main__body_contacts_email">
                                <h4 class="main__body_contacts_email_text">Email:</h4>
                                <h4>barnaul-school103@yandex.ru</h4>
                            </div>
                        </div>
                    </div>
                </div>
            </footer>
        </div>
    </body>
</html>
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

@media only screen and (max-width:900px){
    .main__body{
        grid-template-columns: 1fr;
        grid-template-areas: 
        "main__body_picture"
        "main__body_textandvuzi"
        "main__body_result"
        "main__body_result_picture";
    }
}
.wrapper{
    display: grid;
}
.header__body{
    display: flex;
    margin-left: 10%;
    margin-right: 10%;
    width: 80%;
}
.header__body_text{
    padding: 10px 0px 0px 15px;
}
.header__menu_spisok{
    display: flex;
    justify-content: center;
    margin-left: 10%;
    margin-right: 10%;
}
.menu_li{
    padding: 15px;
    position: relative;
    list-style-type: none;
}
a:hover{
    color:rgb(211, 211, 213);
    transition: 0.5s;
}
a{
    text-decoration: none;
    color: black;
    font-weight:bold;
}
.main__body{
    margin-left: 5%;
    margin-right: 5%;
    width: 90%;
    display: grid;
    grid-template-columns: 2fr 1.5fr;
    grid-column-gap: 15px;
}
.main__body_picture_shkola{
    width: 100%;
    border-radius: 20px;
    align-self: start;
}
.main__body_textandvuzi{
    display: grid;
}
.main__body_text{
    font-size: 18px;
    font-style: italic;
    line-height: 1.7;
}
.main__body_vuzi img{
    width: 95%;
    max-height: 100%;
}
.main__body_result{
    grid-column: 1/3;
}
.main__body_result_picture{
    grid-column: 1/3;
    padding: 20px 0px 0px 0px;
}
.main__body_result_picture img{
    width: 70%;
    margin-left: 15%;
    margin-right: 15%;
}
.main__body_contacts{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-items: center;
    padding: 40px 0px 0px 0px;
}
.main__body_contacts_phone_text{
    margin-bottom: -13px;
}
.main__body_contacts_fax_text{
    margin-bottom: -13px;
}
.main__body_contacts_email_text{
    margin-bottom: -13px;
}
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
 09.04.2023, 11:17
Ответы с готовыми решениями:

Не работает медиазапрос
Не срабатывает при данном разрешении. Вот код: @media (min-width:482px) and (max-width: 600px){...

Не работает медиазапрос
https://jsfiddle.net/u2zen10L/ &lt;div class=&quot;our-works box&quot;&gt; &lt;div class=&quot;container&quot;&gt; &lt;div...

Не работает медиазапрос ниже 980px
Добрый вечер, подскажите пожалуйста, почему не работают медиазпросы меньше 980px, так как 1024 px,...

Как работает медиазапрос, если у всех устройств одинаковое разрешение, хотя размер экрана разный?
Доброго времени суток! Медиазапросы работают при заданных размерах окна браузера. Например, для...

1
Заблокирован
09.04.2023, 15:16 2
Потому что вы стиль .main__body определяете в медиа-запросе, а потом переопределяете сразу.
Порядок следования стилей в файле 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

.wrapper {
  display: grid;
}
.header__body {
  display: flex;
  margin-left: 10%;
  margin-right: 10%;
  width: 80%;
}
.header__body_text {
  padding: 10px 0px 0px 15px;
}
.header__menu_spisok {
  display: flex;
  justify-content: center;
  margin-left: 10%;
  margin-right: 10%;
}
.menu_li {
  padding: 15px;
  position: relative;
  list-style-type: none;
}
a:hover {
  color: rgb(211, 211, 213);
  transition: 0.5s;
}
a {
  text-decoration: none;
  color: black;
  font-weight: bold;
}
.main__body {
  margin-left: 5%;
  margin-right: 5%;
  width: 90%;
  display: grid;
  grid-template-columns: 2fr 1.5fr;
  grid-column-gap: 15px;
}
.main__body_picture_shkola {
  width: 100%;
  border-radius: 20px;
  align-self: start;
}
.main__body_textandvuzi {
  display: grid;
}
.main__body_text {
  font-size: 18px;
  font-style: italic;
  line-height: 1.7;
}
.main__body_vuzi img {
  width: 95%;
  max-height: 100%;
}
.main__body_result {
  grid-column: 1/3;
}
.main__body_result_picture {
  grid-column: 1/3;
  padding: 20px 0px 0px 0px;
}
.main__body_result_picture img {
  width: 70%;
  margin-left: 15%;
  margin-right: 15%;
}
.main__body_contacts {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  justify-items: center;
  padding: 40px 0px 0px 0px;
}
.main__body_contacts_phone_text {
  margin-bottom: -13px;
}
.main__body_contacts_fax_text {
  margin-bottom: -13px;
}
.main__body_contacts_email_text {
  margin-bottom: -13px;
}
 
@media only screen and (max-width: 900px) {
  .main__body {
    grid-template-columns: 1fr;
    grid-template-areas:
      "main__body_picture"
      "main__body_textandvuzi"
      "main__body_result"
      "main__body_result_picture";
  }
}
0
09.04.2023, 15:16
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
 09.04.2023, 15:16
Помогаю со студенческими работами здесь

Не срабатывает медиазапрос
.Golg{ /* margin-top: -75px; */ font-size: 110px; font-family: &quot;Merriweather&quot;; color:...

Как написать медиазапрос для текста
Как написать медиазапрос для текста.Не занаю как адаптировать текст.Нужен небольшой пример.

Почему не работает прыжок, и почему персонаж при ходьбе влево рвется а также раздваивается
import pygame clock = pygame.time.Clock() pygame.init() screen =...

Почему смена текста работает только один раз? Что неправильно в коде и почему?
Нужно чтобы при щелчке мыши на поверхности кнопки текст метки Label изменялся на текст окна...

Почему выводится в виде таблицы и почему не работает сортировка
почему выводится в виде таблицы? почему не работает сортировка? и как туда можно вставить классы...

Объясните, пожалуйста, почему так происходит в первом варианте и почему второй вариант работает корректно?
Я сидел и изучал списки и операции над ними. И написал вот такой простенький код: ...

Почему то программа не работает. Не подскажите почему?
a=random(int) k=odd(a) for i=1 to 59 do if not (odd(a) xor k) then begin k=not k buf=inc(buf)...


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

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Опции темы

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