Запутался в медиа запросах

@плАхишь · Регистрация: 01.07.2015

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

У меня есть секция(скрин ниже). Там 5 кружков вряд и я их изменяю их положение в зависимости от размера окна браузера.
Мне удалось выстроить в линию, затем на 992px выстроить 3+2, а на 768px я выстроил их вертикально в линию, но я что-то делаю не так потому что более чем на 992px блоки не выравниваются в горизонтальную линию.

В общем я не понял что я сделал не так О_о

HTML5
1
2
3
4
5
6
7
                <div class="round-wrap">
                    <div class="round"></div>
                    <div class="round"></div>
                    <div class="round"></div>
                    <div class="round"></div>
                    <div class="round"></div>
                </div>

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
/* section offer END */
.round-wrap {
  width: 100%;
}
 
.round {
  position: relative;
  display: inline-block;
  width: 104px;
  height: 104px;
  border: 2px solid #9dacad;
  border-radius: 50%;
  margin-left: 54px;
}
.round::after {
  content: "";
  position: absolute;
  top: 50px;
  right: -57px;
  width: 53px;
  height: 2px;
  background-color: #e2dee0;
}
.round:last-child::after {
  display: none;
}
.round:first-child {
  margin-left: 0;
}

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
@media only screen and (max-width : 768px) {
    
.round-wrap {
    width: 17%;
    margin: 0 auto; 
}
    
.round {
  margin-bottom: 53px;
    margin-left: 0;
}
.round::after {
  content: "";
  position: absolute;
    top: auto;
  bottom: -57px;
  left: 52px;
  width: 2px;
  height: 53px;
  background-color: #e2dee0;
}
    
}
 
 
@media (min-width: 992px) {
    
    .round-wrap {
        width: 60%;
        margin: 0 auto; 
    }
 
    .round:nth-child(4),.round:nth-child(5){
        top: -4px;
        left: -27px;
    }
    
    .round:last-child::after{
        display: block;
    }
    
    .round:nth-child(2)::after{
        top: 50px;
    right: -57px;
    }
    
  .round:nth-child(3)::after {
    bottom: -57px;
    right: 50px;
        top: auto;
        width: 2px;
    height: 53px;
  }
  .round:nth-child(4)::after {
    left: 104px;
    right: auto;
  }
    
     .round:nth-child(5)::after {
    width: 26px;
        left: 104px;
  }
}

Добавил код в песочницу, но вот беда он почему-то работает не так как у меня в браузере https://jsfiddle.net/towt61c6/
У меня при max-width 992px отображается как на скрине ниже, а в песочнице всё совсем не так О_О
Я не понимаю

@mrtoxas · 06.02.2017, 00:22

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
/* section offer END */
 
.round-wrap {
  width: 100%;
}
 
.round {
  position: relative;
  display: inline-block;
  width: 104px;
  height: 104px;
  border: 2px solid #9dacad;
  border-radius: 50%;
  margin-left: 54px;
}
 
.round::after {
  content: "";
  position: absolute;
  top: 50px;
  right: -57px;
  width: 53px;
  height: 2px;
  background-color: #e2dee0;
}
 
.round:last-child::after {
  display: none;
}
 
.round:first-child {
  margin-left: 0;
}
 
@media (max-width: 992px) {
  .round-wrap {
    width: 60%;
    margin: 0 auto;
  }
  .round:nth-child(4),
  .round:nth-child(5) {
    top: -4px;
    left: -27px;
  }
  .round:last-child::after {
    display: block;
  }
  .round:nth-child(2)::after {
    top: 50px;
    right: -57px;
  }
  .round:nth-child(3)::after {
    bottom: -57px;
    right: 50px;
    top: auto;
    width: 2px;
    height: 53px;
  }
  .round:nth-child(4)::after {
    left: 104px;
    right: auto;
  }
  .round:nth-child(5)::after {
    width: 26px;
    left: 104px;
  }
}
 
@media only screen and (max-width: 768px) {
  .round-wrap {
    width: 17%;
    margin: 0 auto;
  }
  .round {
    margin-bottom: 53px;
    margin-left: 0;
  }
  .round::after {
    content: "";
    position: absolute;
    top: auto;
    bottom: -57px;
    left: 52px;
    width: 2px;
    height: 53px;
    background-color: #e2dee0;
  }
}

@плАхишь · 06.02.2017, 00:50 **[ТС]**

Спасибо огромное, но всё же можете подсказать почему в песочнице вёрстка отображается не так как у мня в браузерах на ПК. Я просто волнуюсь. Может быть я что-то делаю не правильно?

@mrtoxas · 06.02.2017, 01:06

Сбросить масштабирование страницы (ctrl+0), указать viewport, понять порядок написания медиазапросов и можно не волноваться.

@плАхишь · 06.02.2017, 01:12 **[ТС]**

Спасибо. Вопрос решен.

Новые блоги и статьи Все статьи Все блоги /
Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .
Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ	Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .

@плАхишь 1 / 1 / 0 Регистрация: 01.07.2015 Сообщений: 68
	06.02.2017, 00:50 [ТС]
	Спасибо огромное, но всё же можете подсказать почему в песочнице вёрстка отображается не так как у мня в браузерах на ПК. Я просто волнуюсь. Может быть я что-то делаю не правильно? 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	06.02.2017, 01:06
	Сбросить масштабирование страницы (ctrl+0), указать viewport, понять порядок написания медиазапросов и можно не волноваться. 1

@плАхишь 1 / 1 / 0 Регистрация: 01.07.2015 Сообщений: 68
	06.02.2017, 01:12 [ТС]
	Спасибо. Вопрос решен. 0

Запутался в медиа запросах

Решение