Некорректное (?) отображение с телефонов

Поделиться1Вт, 25 Июл 2017 23:47:32

Автор: Евгений Рыбаков
Заслуженный
Зарегистрирован: Вс, 9 Июл 2017
Сообщений: 27
Уважение: +6
Позитив: +8
Последний визит:
Ср, 23 Авг 2017 20:58:24

Здравствуйте. Я довольно долго ковырял ксс и всё же не могу понять причину. При просмотре с телефонов (мобильный стиль, конечно же, отключен) форум показывается не полностью.

Вот скриншот -- https://pp.userapi.com/c638616/v6386164 … ng8J0k.jpg
Форум почему-то смещён влево, а справа, как видите, образовался отступ. С чем это может быть связано? Слишком большая фоновая картинка? Криво выставленные отступы? Ковырять надо другой файл стилей? (скрытый или мобильный)
Помогите! Хоть и мелочь, но дико раздражает. С ПК\ноутов всё ровно по центру и никаких смещений. Для того, чтобы понятна была проблема -- зайдите с ПК, а потом с телефона.

Форум: http://brezhenshtekovich.mybb.ru/

Отредактировано Евгений Рыбаков (Ср, 26 Июл 2017 00:25:51)

0

Поделиться2Ср, 26 Июл 2017 00:55:01

Автор: wersal
Заслуженный
Зарегистрирован: Чт, 17 Сен 2015
Сообщений: 99
Уважение: +37
Позитив: +28
Последний визит:
Пт, 15 Июн 2018 19:17:58

Евгений Рыбаков написал(а):

Форум почему-то смещён влево, а справа, как видите, образовался отступ.

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

0

Поделиться3Ср, 26 Июл 2017 01:39:55

Автор: Евгений Рыбаков
Заслуженный
Зарегистрирован: Вс, 9 Июл 2017
Сообщений: 27
Уважение: +6
Позитив: +8
Последний визит:
Ср, 23 Авг 2017 20:58:24

wersal
Ничего критичного, конечно, нет, но таки раздражает. Слева отступа нет, а справа он почему-то есть. В остальном форум полностью адекватно отображается, кроме этой маленькой проблемы. Я ставил фоны таким же способом (многослойный background на 1 элемент) на двух других форумах и подобной проблемы не возникало.
Вот ещё один пример -- http://wowproba.mybb.ru/
Совершенно идеально главная выглядит, без смещений. Возможно дело в ширине самого фона? Но ведь по идее должно ужиматься. На 1 пробнике (Насрута) ширина фона (именно картинки) -- 1000, а на втором (ВОВ) -- 990. На основном форуме так же всё корректно отображается с шириной в 900.

Скриншот со стрелками

Отредактировано Евгений Рыбаков (Ср, 26 Июл 2017 01:45:23)

0

Поделиться4Ср, 26 Июл 2017 01:50:54

Автор: Евгений Рыбаков
Заслуженный
Зарегистрирован: Вс, 9 Июл 2017
Сообщений: 27
Уважение: +6
Позитив: +8
Последний визит:
Ср, 23 Авг 2017 20:58:24

И, раз уж я поднял эту тему, ещё одна проблема есть. Тоже мелочная но очень непонятная для меня. Внутри форума ссылка с датой и времени публикации поста (она же permalink) с телефона почему-то отображается весьма крупно. Я прописал font-size с !important. Она конечно стала меньше, но явно не соответствует тому размеру что должен быть. Причём это только на 1 пробнике (http://brezhenshtekovich.mybb.ru), когда на 2 пробнике (http://wowproba.mybb.ru/) подобного не наблюдается. Скриншот прилагаю с ПК, увы с телефона нет возможности в данный момент сделать скрин.

0

Поделиться5Ср, 26 Июл 2017 02:02:19

Автор: wersal
Заслуженный
Зарегистрирован: Чт, 17 Сен 2015
Сообщений: 99
Уважение: +37
Позитив: +28
Последний визит:
Пт, 15 Июн 2018 19:17:58

Евгений Рыбаков
По черной полосе справа, попробуйте так:
#pun {
margin: 0px auto 0px auto;
padding: 450px 30px 0px 10px;
width: 980px;
box-sizing: border-box;
}
Вообщем то это значение отступов пан влияет на отображение на телефоне. Если после этого на декстопной версии ничего не сползет, можно так оставить, если сползет, то тогда только для мобильного прописать.

0

Поделиться6Ср, 26 Июл 2017 02:11:14

Автор: wersal
Заслуженный
Зарегистрирован: Чт, 17 Сен 2015
Сообщений: 99
Уважение: +37
Позитив: +28
Последний визит:
Пт, 15 Июн 2018 19:17:58

Евгений Рыбаков написал(а):

И, раз уж я поднял эту тему, ещё одна проблема есть. Тоже мелочная но очень непонятная для меня. Внутри форума ссылка с датой и времени публикации поста (она же permalink) с телефона почему-то отображается весьма крупно. Я прописал font-size с !important. Она конечно стала меньше, но явно не соответствует тому размеру что должен быть.

У вас на весь форум прописан фиксированный размер шрифта в боди.
body {
font: normal 10pt verdana;
}

От этого проблемы с настройками. Тут надо указывать в процентном соотношении, а далее отдельные блоки настраивать размеры текста.

+1

Поделиться7Ср, 26 Июл 2017 02:11:50

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51115
Уважение: +15197
Позитив: +11571
Последний визит:
Сегодня 12:23:59

Евгений Рыбаков
1-е!!! Создайте во всех видимых с Главной форумах(разделах) темы с достаточно длинными названиями - сделайте скриншот(Пока ничего не меняя!)

0

Поделиться8Ср, 26 Июл 2017 03:05:35

Автор: Евгений Рыбаков
Заслуженный
Зарегистрирован: Вс, 9 Июл 2017
Сообщений: 27
Уважение: +6
Позитив: +8
Последний визит:
Ср, 23 Авг 2017 20:58:24

wersal
Padding в #pun никак не поможет, по идее. Это внутренние отступы, а проблема именно в фоне, который прописан картинкой. Я всё равно попробую конечно, но чуть позже.

На счёт размера шрифта - понял, принял. Попробую прописать в % и потом уже править. Но тогда я не совсем понимаю принципа взаимодействия. Я же установил размер отдельно для permalink через !important -- в обход font-size в body.

Deff
Всё сделал. Меня беспокоит именно то, что левая рамка куда-то девается, а правая есть. Отступ справа, кажется (я не уверен), стал меньше. Но непонятно куда девается левая рамка и почему правая таки есть. Может попробовать именно фон меньше сделать и это решит все проблемы?

Скриншоты

0

Поделиться9Ср, 26 Июл 2017 03:13:20

Автор: Евгений Рыбаков
Заслуженный
Зарегистрирован: Вс, 9 Июл 2017
Сообщений: 27
Уважение: +6
Позитив: +8
Последний визит:
Ср, 23 Авг 2017 20:58:24

wersal
Попробовал. Вообще помогло, спасибо. Форум хоть и съезжает немного влево, но с телефона зато выглядит сносно. Хотелось бы конечно чтобы фон ужимался корректно как это происходит на любых других пробниках. ~~Многого я не понимаю, видимо.~~
Так что, в случае отсутствия альтернативы, воспользуюсь твоим способом. Спасибо ещё раз!

0

Поделиться10Ср, 26 Июл 2017 11:52:45

Автор: Евгений Рыбаков
Заслуженный
Зарегистрирован: Вс, 9 Июл 2017
Сообщений: 27
Уважение: +6
Позитив: +8
Последний визит:
Ср, 23 Авг 2017 20:58:24

UPD
Уменьшил фон на пробнике до 900 -- и всё стало нормально. Никаких отступов. Только непонятно, почему фон шириной в 1000 ужиматься под страницу не хочет.
http://brezhenshtekovich2.mybb.ru/

0

Поделиться11Ср, 26 Июл 2017 11:54:22

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51115
Уважение: +15197
Позитив: +11571
Последний визит:
Сегодня 12:23:59

Евгений Рыбаков
Добавьте в начало Второго Окна Стиля:

html,body {min-width:1004px!important;}/*!Правка размеров полотна форума для мобильных Устройств с мелким Экраном*/

Отредактировано Deff (Ср, 26 Июл 2017 12:22:39)

+2

Поделиться12Ср, 26 Июл 2017 16:46:24

Автор: Евгений Рыбаков
Заслуженный
Зарегистрирован: Вс, 9 Июл 2017
Сообщений: 27
Уважение: +6
Позитив: +8
Последний визит:
Ср, 23 Авг 2017 20:58:24

Deff
Помогло! 1020 поставил. Теперь всё ровненько. Спасибо большое, легендарный чинитель. с:

Ещё вопрос есть по теме. Тоже непонятного происхождения баг (баг ли?). Симптомы - размеры шрифтов и форума очень сильно меняются при наличии в теме длинного сообщения. Если несколько коротких сообщений, то ничего не происходит. Не обращайте внимания на кривую шапку и отступы -- это ещё старые скриншоты. На всех скриншотах ОДИНАКОВЫЙ (!) масштаб, а именно "максимально отдалено".

Скриншоты

Отредактировано Евгений Рыбаков (Ср, 26 Июл 2017 16:47:35)

0

Поделиться13Ср, 26 Июл 2017 21:54:35

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51115
Уважение: +15197
Позитив: +11571
Последний визит:
Сегодня 12:23:59

Евгений Рыбаков
Попробуйте добавить Пару строк (красным) в Первом Окне Стиля

/* B1.3 */
.punbb .post-content p {
margin: 0;
word-break:break-all;
white-space:pre-wrap;
padding: 0 0 0.5em 0;
line-height: 150%;
}

0

Поделиться14Чт, 27 Июл 2017 00:37:53

Автор: Евгений Рыбаков
Заслуженный
Зарегистрирован: Вс, 9 Июл 2017
Сообщений: 27
Уважение: +6
Позитив: +8
Последний визит:
Ср, 23 Авг 2017 20:58:24

Deff
Ноль эффекта.
В темах, где нет больших сообщений, подобного не происходит. По гороскопу, видимо, неделя загадочного КСС. ^ . ^

0

Поделиться15Чт, 27 Июл 2017 01:20:53

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51115
Уважение: +15197
Позитив: +11571
Последний визит:
Сегодня 12:23:59

Евгений Рыбаков написал(а):

Deff
Ноль эффекта.
В темах, где нет больших сообщений, подобного не происходит. По гороскопу, видимо, неделя загадочного КСС. ^ . ^

Я не увидел добавки в Первом окне, как стояло:

/* B1.3 */
.punbb .post-content p {
margin: 0;
padding: 0 0 1em 0;
line-height: 150%;
}

Так и стоит... Желательно парное взаимодействие для возможного решения... в одно лицо тяжело

+1

Поделиться16Чт, 27 Июл 2017 02:12:19

Автор: Евгений Рыбаков
Заслуженный
Зарегистрирован: Вс, 9 Июл 2017
Сообщений: 27
Уважение: +6
Позитив: +8
Последний визит:
Ср, 23 Авг 2017 20:58:24

Deff
Я сначала подумал, что я случайно не на тот форум закинул. Но нет.
Стоит всё, серьёзно. Я ценю ваше время и вроде не совсем дурак. Добавил !important, на всякий случай. Откройте CSS вручную, если через инспектор не показывает. Может админку дать просто? Покопаетесь на досуге, как будет время.

brezhenshtekovich.mybb.ru
http://forumstatic.ru/styles/0018/c3/15 … 110560.css

Отредактировано Евгений Рыбаков (Чт, 27 Июл 2017 02:15:57)

0

Поделиться17Чт, 27 Июл 2017 03:11:38

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51115
Уважение: +15197
Позитив: +11571
Последний визит:
Сегодня 12:23:59

Евгений Рыбаков+ - Да, сейчас стоит... возможно http://forumstatic.ru кешировал старые данные...
На всякий случай, выполните очистку кеша на странице сайта(Темы)( с того устройства, что просматриваете...) cовместным нажатием cntr+F5

Отредактировано Deff (Чт, 27 Июл 2017 03:12:53)

0

Поделиться18Чт, 27 Июл 2017 11:40:38

Автор: Евгений Рыбаков
Заслуженный
Зарегистрирован: Вс, 9 Июл 2017
Сообщений: 27
Уважение: +6
Позитив: +8
Последний визит:
Ср, 23 Авг 2017 20:58:24

Deff
Я так всегда обновляю страницу когда видимых изменений нет. Слова конечно некоторые стали переноситься по-другому, но в целом ситуация осталась прежней. Вот ещё два скриншота посвежее. 1 - тема где нет длинных сообщений. Ничего не меняется. 2 - тема где есть длинные сообщения. Сами сообщения становятся крупнее и читабельнее, так же увеличивается размер хлебных крошек.

На самом деле, я подумал и понял что лучше будет если везде будет как на 2 скриншоте. Но увы не везде есть длинные сообщения. Возможно ли как-то сделать, чтобы везде темы внутри выглядели как на скриншоте #2, независимо от длины сообщений?

Скриншоты