Адаптивный шаблон

@Alex-Kir · Регистрация: 04.05.2014

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

Всем доброго времени суток!

Вот начал делать шаблон, значит сделал, в браузере выглядит нормально. Но когда гружу на телефоне либо планшете - все съезжает, и у центральных блоков пропадает выравнивание по центру.

Я перечитал Хабр и прочие сайты, попробовал по-разному подойти к проблеме - и все равно моб устройства отображают так...
Причем у них разрешение не маленькое, то есть , как я понимаю, проблема не в адаптации под разрешения экранов, а в самой верстке.

Буду очень благодарен за помощь

Пытаюсь реализовать выравнивание через margin:0 auto; на компьютере все работает, на айпеде и самсунге нет...

P.S. Вот сам код:

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
<body>
    <div id="head">
        <h1>СТРОЙ.КА <span>все для строительства и ремонта</span></h1>
        <img src="https://www.cyberforum.ru/images/time_header.png" id="time_header_img" />
        <p id="time_text1">пн-сб 9.00-19.00</p>
        <p id="time_text2">воскр 9.00-17.00</p>
        <img src="https://www.cyberforum.ru/images/phone_header.png" id="phone_header_img" />
        <img src="https://www.cyberforum.ru/images/email_header.png" id="email_header_img" />
        <p id="phone_header">+7 964 785 61 05</p>
        <p id="email_header">info@stroika-sp.ru</p>
        <a href=""><div id="basket_header">
            <img src="https://www.cyberforum.ru/images/basket_header.png" />
            <p>товаров: 0</p>
            <p>сумма: 0</p>
        </div></a>
        <div class="clearfix"></div>
    </div>
    <div id="min_menu_wrap">
        <div id="min_menu">
        <a href="">главная</a>
        <a href="">доставка и оплата</a>
        <a href="">о компании</a>
        <a href="">контакты</a>
        <div class="clearfix"></div>
        </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
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
* {
    margin:0;
    padding:0;
}
body {
    width:100%;
    height:100%;
    background:#212121;
}
a {
    text-decoration:none;
}
.clearfix {
    clear:both;
}
/* Header */
#head {
    width:1200px;
    min-width:1200px;
    height:auto !important;
    margin:0 auto;
    padding-top:35px;
    padding-bottom:25px;
}
#head img {
    float:left;
}
#head p {
    float:left;
    font-family:Verdana, Geneva, sans-serif;
    font-size:14px;
    color:white;
    font-weight:bold;
}
h1 {
    font-family:Verdana, Geneva, sans-serif;
    color:white;
    font-size:30px;
    width:500px;
    margin-left:10px;
    margin-top:5px;
    float:left;
    display:block;
}
h1 span {
    font-size:16px;
}
#time_header_img {
    margin-left:50px;
}
#time_text1 {
    position:relative;
    left:10px;
    top:-3px;
}
#time_text2 {
    position:relative;
    left:-127px;
    top:20px;
}
#phone_header_img {
    position:relative;
    left:-90px;
    top:-15px;
}
#email_header_img {
    position:relative;
    left:-129px;
    top:10px;
}
#phone_header {
    position:relative;
    left:-120px;
    top:-4px;
}
#email_header {
    position:relative;
    left:-120px;
    top:3px;
}
#basket_header {
    float:left;
    width:175px;
    height:auto !important;
    background:#fffc00;
    border-radius:7px;
    padding-top:27px;
    padding-bottom:17px;
    margin-left:60px;
    margin-top:-75px;
    padding-left:5px;
}
#basket_header p {
    color:black !important;
    margin-top:3px;
    margin-left:10px;
}
/* Mini menu */
#min_menu_wrap {
    width:100%;
    height:auto !important;
    background:#000;
}
#min_menu {
    width:579px;
    height:auto !important;
    margin:0 auto;
}
#min_menu a {
    color:white;
    font-size:14px;
    font-family:Verdana, Geneva, sans-serif;
    font-weight:bold;
    padding:10px 25px;
    display:block;
    float:left;
    transition:0.1s all ease-in-out;
}
#min_menu a:hover {
    color:#fffc00;
}

@magnusmax · 13.09.2016, 09:10

Почему для адаптивности Вы не используете Bootstrap?

@Resume · 13.09.2016, 11:06

У каких именно центральных блоков пропадает выравнивание по центру?

Скиньте лучше с картинками шаблон архивом пожалуйста

!

@Alex-Kir · 13.09.2016, 11:48 **[ТС]**

Ну вот "шаблон", ну там только шапка, тоже самое, что и на скринах. Ибо пока не решится это - дальше нет смыла верстать

Смотрите, во-первых на скрине с телефона полностью пропадает блок

CSS
1
#min_menu_wrap

, то есть видите, там только черная менюшка, а блока нет, у которого стоит длина 100% и цвет черный. Соответственно, как я подозреваю, из-за этого, у блока меню

CSS
1
#min_menu

нет выравнивания по центру.

И, похоже, что в в этом блоке не работает margin:0 auto;

CSS
1
2
3
4
5
6
7
8
#head {
    width:1200px;
    min-width:1200px;
    height:auto !important;
    margin:0 auto;
    padding-top:35px;
    padding-bottom:25px;
}

На компьютере все выглядит ОК, почему телефон не отображает wrapper'ры и не использует margin - я не знаю...

P.S. Отсутствие блока #min_menu_wrap похоже на то, что высота блога не использует плавающие элементы, но эту проблему для компьютера я решил с помощью добавления блока

CSS
1
2
3
.clearfix {
    clear:both;
}

Вообще не понимаю... Разрешение экрана у телефона 1280 x 720 - по длине хватает...

@Alex-Kir · 13.09.2016, 12:42 **[ТС]**

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

Почему для адаптивности Вы не используете Bootstrap?

Мне нужно сдать максимально быстро, движок магазина уже написал (благо back-end получше знаю...) - все работает, тестировали. Дизайн тоже уже полностью сделан в Фотошопе. Осталось только шаблон сверстать... И тут вот засада

Похоже, что со следующего проекта буду использовать Bootstrap

P.S. Сейчас посидел, посмотрел по поводу Bootstrap - пожалуй да, надо с ним делать, легче. Но все же... Интересно почему возникает такое.

Добавлено через 50 минут
Исправил код в одном месте на:

CSS
1
2
3
4
5
6
#min_menu_wrap {
    width:100%;
    min-width:1200px;
    height:auto !important;
    background:#000;
}

В apple стало показываться нормально, а самсунг что-то не хочет...

У Самсунга разрешение 1280px, он показывает 1200px длину меню - то есть min-width, а какого не работает width:100% ?!

@Resume · 13.09.2016, 12:55

Лучше используйте Bootstrap или Zurb foundation, потому что вам придется долго возиться с версткой( писать @media запросы и т.д). Html-код тоже очень плохо написан. Это мое субъективное мнение. Я попытался поделать, но потом понял, что с шапкой возиться долго придется.

@Alex-Kir · 13.09.2016, 13:23 **[ТС]**

Хорошо, спасибо за советы!

Новые блоги и статьи Все статьи Все блоги /
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .

@magnusmax 97 / 90 / 61 Регистрация: 20.10.2013 Сообщений: 300
	13.09.2016, 09:10
	Почему для адаптивности Вы не используете Bootstrap? 0

@Resume 143 / 133 / 69 Регистрация: 08.11.2013 Сообщений: 767 Записей в блоге: 5
	13.09.2016, 11:06
	У каких именно центральных блоков пропадает выравнивание по центру? Скиньте лучше с картинками шаблон архивом пожалуйста ! 0

@Resume 143 / 133 / 69 Регистрация: 08.11.2013 Сообщений: 767 Записей в блоге: 5
	13.09.2016, 12:55
	Лучше используйте Bootstrap или Zurb foundation, потому что вам придется долго возиться с версткой( писать @media запросы и т.д). Html-код тоже очень плохо написан. Это мое субъективное мнение. Я попытался поделать, но потом понял, что с шапкой возиться долго придется. 0

@Alex-Kir 0 / 0 / 0 Регистрация: 04.05.2014 Сообщений: 64
	13.09.2016, 13:23 [ТС]
	Хорошо, спасибо за советы! 0