Сайт не помещается в экран смартфона

@ИсламЭркенов · Регистрация: 15.03.2019

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

Есть сайт http://mytermometr.ru/
На телефоне отображается некорректно не помещается по ширине появляется ползунок, как сделать что бы ширина сайта соответствовал ширине экрана?

@Brokolya · 15.03.2019, 19:51

либо прописать в <head></head>

HTML5
1
<meta name="viewport" content="width=1024">

где 1024 ширина сайта в пикселях либо сделать правильней и использовать

CSS
1
2
@media only screen and (max-width: XXXXpx) {
}

в css. Уроков полно.

@Mihail51 · 17.03.2019, 11:10

Попробуй вот так:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
body {
  max-width: 1320px;
}
 
@media (max-width: 576px) {
   .wrapper {
      width: 100%;
    }
    .sec-1 {
       background-size: cover;
    }
    .sec-2 {
        margin-left: 40%;
    }
    .sec-1 .center {
        margin-left: -140px;
        left: 50%;
    }
    .item-2 {
        margin: 0 auto;
    }
}

Если я ничего не забыл. Проверь. Если что - позже посмотрю точнее.

@Freeze_Breeze · 17.03.2019, 11:37

ИсламЭркенов, А еще лучше сделай так

HTML5
1
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

@Mihail51 · 17.03.2019, 13:51

Это если человек знаком с будстрапом. Но судя по его коду, он его не знает.

Кстати, размер body можешь поставить по своему макету, но не min.

@Freeze_Breeze · 17.03.2019, 15:48

ИсламЭркенов,

Сообщение от ИсламЭркенов

На телефоне отображается некорректно не помещается по ширине появляется ползунок, как сделать что бы ширина сайта соответствовал ширине экрана?

А чего Вы ожидали? Ваш сайт статический, в нем нет ничего резинового, ни одного блока который бы растягивался.

Сообщение от ИсламЭркенов

как сделать что бы ширина сайта соответствовал ширине экрана?

Переверстать полностью сайт используя бутстрап. Парой css правил Вы ничего не достигнете.

@Mihail51 · 17.03.2019, 17:45

Freeze_Breeze
Ты не прав. Верстать адаптивный сайт можно и без бутстрапа. Посто сложнее адаптация.
"Переверстать полностью сайт используя бутстрап" - для этого сначала надо выучить будстрап, а это занимает время.
Сначала надо научиться верстать сайты без использования будстрапа и других, а уже потом, зная простую вёрстку, учить всё, что её облегчает.
Вам, спецмалистам, трудно понять новичков. Для вас в порядке вещей, посоветовать верстать тем или иным образом.
Я сейчас учусь верстать сайты. Сейчас я верстаю без использования JS, будстрапа и других. Буду учить их только когда освою простую вёрстку.
Если хочешь посмотри этот сайт я верстал с целью посадить его на wordpress, поэтому адаптация велась под размеры wordpressa.
А этот сайт просто адаптивный.
Научусь верстать так - начну учить JS и будстрап, и грид, если времени хватит.

@Freeze_Breeze · 17.03.2019, 18:13

Mihail51,

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

Верстать адаптивный сайт можно и без бутстрапа

Можно конечно, но потом вылазит много костылей и зачем это делать если есть такой замечательный фреймворк.

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

Вам, спецмалистам, трудно понять новичков

Я далеко не специалист, я такой же верстальщик как и ты, только использую бутстрап. Он облегчает разного рода проблемы и решает всякие костыли.

@Mihail51 · 17.03.2019, 18:25

Извини, в первом были ошибки. Попробуй вот так:

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
body {
  max-width: 1320px;
}
 
@media (max-width: 576px) {
   .wrapper {
      width: 100%;
    }
    .sec-1 {
       background-size: cover;
    }
    .sec-1 .container {
        margin-left: 40%;
    }
    .sec-1 .center {
        margin-left: -140px;
        left: 50%;
    }
    .sec-2 {
        margin: 0 auto;
    }
    .item-2 {
        float: none;
        margin: 0 auto;
    }
}

Добавлено через 9 минут
Я полностью с тобой согласен, но

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

Он облегчает разного рода проблемы и решает всякие костыли

- проблема в том, что их будстрап решает, а не верстальщик. А если верстальщик, по какой-то причине, сталкивается с этими проблемами он их не готов решать.
У мня недавно возникла проблема "Подбрасывание" сайта при клике на ссылку . Специалисты мне ответили, что без JS её решить невозможно. Но я её решил без JS. Посмотри здесь
И вот когда я научусь решат такие проблемы - я буду учить JS.
Может я и не прав, но я иду таким путём

Новые блоги и статьи Все статьи Все блоги /
Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа 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

@ИсламЭркенов 0 / 0 / 0 Регистрация: 15.03.2019 Сообщений: 1

	Сайт не помещается в экран смартфона 15.03.2019, 13:16. Показов 8388. Ответов 8 Метки css, html, адаптивная верстка, верстка (Все метки) Есть сайт http://mytermometr.ru/ На телефоне отображается некорректно не помещается по ширине появляется ползунок, как сделать что бы ширина сайта соответствовал ширине экрана? Миниатюры 0

@Mihail51 0 / 0 / 0 Регистрация: 09.06.2018 Сообщений: 41
	17.03.2019, 13:51
	Это если человек знаком с будстрапом. Но судя по его коду, он его не знает. Кстати, размер body можешь поставить по своему макету, но не min. 0

@Mihail51 0 / 0 / 0 Регистрация: 09.06.2018 Сообщений: 41
	17.03.2019, 17:45
	Freeze_Breeze Ты не прав. Верстать адаптивный сайт можно и без бутстрапа. Посто сложнее адаптация. "Переверстать полностью сайт используя бутстрап" - для этого сначала надо выучить будстрап, а это занимает время. Сначала надо научиться верстать сайты без использования будстрапа и других, а уже потом, зная простую вёрстку, учить всё, что её облегчает. Вам, спецмалистам, трудно понять новичков. Для вас в порядке вещей, посоветовать верстать тем или иным образом. Я сейчас учусь верстать сайты. Сейчас я верстаю без использования JS, будстрапа и других. Буду учить их только когда освою простую вёрстку. Если хочешь посмотри этот сайт я верстал с целью посадить его на wordpress, поэтому адаптация велась под размеры wordpressa. А этот сайт просто адаптивный. Научусь верстать так - начну учить JS и будстрап, и грид, если времени хватит. 0