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

Адаптивность при уменьшении окна браузера

11.11.2018, 19:17. Показов 16963. Ответов 2
Метки нет (Все метки)
Author24 — интернет-сервис помощи студентам
Я сверстал карточку товара, и в задании от меня требуют:

· Сама карточка (прямоугольник с белым фоном) должна находиться строго по центру страницы по горизонтали и по вертикали независимо от размера экрана

· Не нужно растягивать весь блок (прямоугольник с белым фоном) на всю ширину страницы

· При уменьшении размера экрана до 991 пикселя блок (прямоугольник с белым фоном) также меняет свой размер. При этом контент не должен выпадать за пределы блока

А я нихрена не знаю про адаптивность, т.к. еще учусь.

Вот ссылка на хостинг.

http://rovax-art.online/lesson4/src


И так же прикладываю архив с исходниками.
Вложения
Тип файла: rar lesson-4-homework.rar (163.6 Кб, 30 просмотров)
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
 11.11.2018, 19:17
Ответы с готовыми решениями:

Отступы при уменьшении окна браузера
Сделал небольшие отступы главного блока css. Можно ли чтобы при уменьшении окна эти отступы...

При уменьшении окна браузера меню распадается
добрый день при уменьшение окна браузера меню распадает <body> <div class="nav"> <div...

При уменьшении окна браузера не переносить блок
Приветствую, есть такая структура. <div class="wrapper"> <div class="content"></div> ...

При уменьшении окна браузера блоки меняют положение
Как закрепить блоки чтобы они не меняли исходное положение?

2
215 / 180 / 79
Регистрация: 02.10.2011
Сообщений: 651
11.11.2018, 22:01 2
Отобразить по центру можно так :
CSS
1
2
3
4

position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
Чтобы применить стили для 991 пикселей и ниже используется медиазпросы
CSS
1
2

@media only screen and (max-width : 991px) {
}
0
204 / 67 / 41
Регистрация: 15.09.2018
Сообщений: 197
14.11.2018, 12:13 3
Варианты:

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

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
 
body {
    /*! background-color: #f6f6f6; */
    color: #2f2f2f;
}
 
.container {
    /*! position: absolute; */
    /*! left: 50%; */
    /*! margin-left: -505px; */
    /*! top: 50%; */
    /*! margin-top: -251.5px; */
    /*! width: 1010px; */
    /*! height: 503px; */
    /*! border: 1px solid #d7d7d7; */
    background-color: #fff;
    width: 100%;
    max-width: 900px;
    margin: 15px auto;
    padding: 45px 15px;
 
}
 
.box-1 {
    display: inline-block;
    vertical-align: middle;
    width: 43%;
    /*! margin: 64px 100px 64px 48px; */
    margin-right: 11%;
}
 
#beats {
    width: 100%;
}
 
 
 
.box-2 {
    display: inline-block;
    vertical-align: middle;
    /*! width: 393px; */
    width: 45%;
    
}
 
h1 {
    font-family: "Arial-BoldMT";
    font-size: 23px;
    font-weight: bold;
}
 
p {
    /*! display: inline-block; */
    margin-top: 30px;
    font-family: "Arial MT";
    font-size: 15px;
}
 
.price {
    display: block;
    margin-top: 55px;
    font-size: 15px;
}
 
.number {
    display: block;
    margin-top: 23px;
    font-family: "Arial MT";
    font-size: 30px;
 
}
 
button {
    margin-top: 56px;
    width: 252px;
    height: 50px;
    font-size: 19px;
    background-color: #ec744a;
    color: #fff;
    border-style: none;
}
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

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
 
body {
    background-color: #f6f6f6;
    color: #2f2f2f;
}
 
.container {
    /*! position: absolute; */
    /*! left: 50%; */
    /*! margin-left: -505px; */
    /*! top: 50%; */
    /*! margin-top: -251.5px; */
    /*! width: 1010px; */
    /*! height: 503px; */
    border: 1px solid #d7d7d7;
    background-color: #fff;
    width: 100%;
    max-width: 900px;
    margin: 15px auto;
    padding: 45px 15px;
 
}
 
.box-1 {
    display: inline-block;
    vertical-align: middle;
    width: 43%;
    /*! margin: 64px 100px 64px 48px; */
    margin-right: 11%;
}
 
#beats {
    width: 100%;
}
 
 
 
.box-2 {
    display: inline-block;
    vertical-align: middle;
    /*! width: 393px; */
    width: 45%;
    
}
 
h1 {
    font-family: "Arial-BoldMT";
    font-size: 23px;
    font-weight: bold;
}
 
p {
    /*! display: inline-block; */
    margin-top: 30px;
    font-family: "Arial MT";
    font-size: 15px;
}
 
.price {
    display: block;
    margin-top: 55px;
    font-size: 15px;
}
 
.number {
    display: block;
    margin-top: 23px;
    font-family: "Arial MT";
    font-size: 30px;
 
}
 
button {
    margin-top: 56px;
    width: 252px;
    height: 50px;
    font-size: 19px;
    background-color: #ec744a;
    color: #fff;
    border-style: none;
}
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

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
 
body {
    /*! background-color: #f6f6f6; */
    color: #2f2f2f;
}
 
.container {
    /*! position: absolute; */
    /*! left: 50%; */
    /*! margin-left: -505px; */
    /*! top: 50%; */
    /*! margin-top: -251.5px; */
    /*! width: 1010px; */
    /*! height: 503px; */
    /*! border: 1px solid #d7d7d7; */
    
    /*! background-color: #fff; */
    display: flex;
    width: 100%;
    max-width: 900px;
    margin: 15px auto;
    padding: 45px 15px;
 
}
 
.box-1 {
    /*! display: inline-block; */
    /*! vertical-align: middle; */
    width: 43%;
    /*! margin: 64px 100px 64px 48px; */
    margin-right: 11%;
}
 
#beats {
    width: 100%;
}
 
 
 
.box-2 {
    /*! display: inline-block; */
    /*! vertical-align: middle; */
    /*! width: 393px; */
    width: 45%;
    
}
 
h1 {
    font-family: "Arial-BoldMT";
    font-size: 23px;
    font-weight: bold;
}
 
p {
    /*! display: inline-block; */
    margin-top: 30px;
    font-family: "Arial MT";
    font-size: 15px;
}
 
.price {
    display: block;
    margin-top: 55px;
    font-size: 15px;
}
 
.number {
    display: block;
    margin-top: 23px;
    font-family: "Arial MT";
    font-size: 30px;
 
}
 
button {
    margin-top: 56px;
    width: 252px;
    height: 50px;
    font-size: 19px;
    background-color: #ec744a;
    color: #fff;
    border-style: none;
}

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

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
 
body {
    /*! background-color: #f6f6f6; */
    color: #2f2f2f;
}
 
.container {
    /*! position: absolute; */
    /*! left: 50%; */
    /*! margin-left: -505px; */
    /*! top: 50%; */
    /*! margin-top: -251.5px; */
    /*! width: 1010px; */
    /*! height: 503px; */
    /*! border: 1px solid #d7d7d7; */
    
    /*! background-color: #fff; */
    display: flex;
    width: 100%;
    max-width: 900px;
    margin: 15px auto;
    padding: 45px 15px;
 
}
 
.box-1 {
    /*! display: inline-block; */
    /*! vertical-align: middle; */
    width: 43%;
    /*! margin: 64px 100px 64px 48px; */
    margin-right: 11%;
}
 
#beats {
    width: 100%;
}
 
 
 
.box-2 {
    /*! display: inline-block; */
    /*! vertical-align: middle; */
    /*! width: 393px; */
    width: 45%;
    
}
 
h1 {
    font-family: "Arial-BoldMT";
    font-size: 23px;
    font-weight: bold;
}
 
p {
    /*! display: inline-block; */
    margin-top: 30px;
    font-family: "Arial MT";
    font-size: 15px;
}
 
.price {
    display: block;
    margin-top: 55px;
    font-size: 15px;
}
 
.number {
    display: block;
    margin-top: 23px;
    font-family: "Arial MT";
    font-size: 30px;
 
}
 
button {
    margin-top: 56px;
    width: 252px;
    height: 50px;
    font-size: 19px;
    background-color: #ec744a;
    color: #fff;
    border-style: none;
}
 
@media (max-width: 600px){
    .container{
        flex-wrap: wrap;
    }
    .box-1{
        width: 100%;
        margin-right: 0;
        margin-bottom: 45px;
    }
    
        .box-2{
        width: 100%;
        text-align: center;
    }
 
}
0
14.11.2018, 12:13
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
 14.11.2018, 12:13
Помогаю со студенческими работами здесь

Масштабирование шаблона сайта при уменьшении окна браузера
Добрый день, http://stroyekonom.ru/ проблема в следующем, при уменьшении размеров окна браузера...

Блок съезжает влево при уменьшении окна браузера
При уменьшении окна браузера до "25%" блок id="left" не много съезжает влево, не понятно почему ...

Как уменьшить блок при уменьшении окна браузера?
У меня есть блок (width=900) и в нем есть еще 1 блок с текстом (max-width 500 ), подскажите что...

Расползается шапка при уменьшении размера окна браузера
Всем привет! Верстку только-только осваиваю => далеко не всё гладко, за что прошу простить. ...


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

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