Единый форум поддержки

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.

Вы здесь » Единый форум поддержки » Вопросы по оформлению форума » Вопросы по мобильному стилю

Вопросы по мобильному стилю

Страница:   1 … 9 10 11 12  

Сообщений 201 страница 220 из 228

201

  • Автор: Shephard
  • Заслуженный
  • Shephard
  • Зарегистрирован: Пт, 22 Дек 2017
  • Сообщений: 228
  • Уважение: +69
  • Позитив: +104
  • Последний визит:
    Пт, 7 Июл 2023 15:56:50
Alex_63 написал(а):
Shephard написал(а):

Насколько я понимаю, мои отдельные правила я вставляю в фигурные скобки?

Да, именно так, по примеру стандартного мобильного стиля http://forumfiles.ru/style/mobile.6.css

Попробовала отредактировать мобильный стиль. Выглядит, в принципе, симпатично, но только когда в инспекторе стоит Responsive. Когда начинаю смотреть по конкретным смартфонам (Galaxy S5, IPhone 5, 5S и т.д.), некоторые блоки начинают съезжать. Если исправляю для одного смартфона, на другом выглядит стремно, так как ширина экрана у всех разная.
Как отредактировать это так, чтобы нормально было видно на всех смартфонах? Делать стили отдельно для каждой ширины экрана?
Тестовый форум: anatomyofinspiration.rusff.ru

Отредактировано Shephard (Пн, 19 Авг 2019 19:45:56)

0

202

  • Автор: Alex_63
  • Администратор
  • Alex_63
  • Зарегистрирован: Чт, 11 Дек 2014
  • Сообщений: 10703
  • Уважение: +7192
  • Позитив: +5264
  • Пол: Мужской
  • Последний визит:
    Сегодня 01:18:12

Shephard
Во-первых, в блок с @media оборачивать можно не каждое правило отдельно, а все вместе: так удобнее и кода меньше.
Во-вторых, для адаптивности указывайте относительную ширину (в процентах, vw/vh (100vw = ширине вьюпорта, т.е. в данном случае окна браузера, с vh аналогично) и т.п.), а не фиксированную в пикселях т.к. на разных устройствах ширина вьюпорта будет разной, а отображаться должно одинаково на всех.

+1

203

  • Автор: C3La-NS
  • Модератор 😈
  • C3La-NS
  • Зарегистрирован: Вс, 29 Май 2011
  • Сообщений: 635
  • Уважение: +640
  • Позитив: +372
  • Пол: Мужской
  • Последний визит:
    Вс, 21 Апр 2024 15:43:36

Alex_63
Кстати, было б неплохо наверное прописать для стандартного мобильного шаблона Mybb отдельный стиль для таблиц в постах. Сейчас верстаю темку, для этого разбиваю ячейки в процентом соотношении, скажем, 70% и 30%. С компа выглядит красиво и хорошо, а с мобилок все ужимается до нечитабельного размера.
То есть прописать бы, чтобы ячейка занимала на мобилках 100% ширины.
Эх, хотя бы на здесь, а то сюда же специально темку делаю...

0

204

  • Автор: Alex_63
  • Администратор
  • Alex_63
  • Зарегистрирован: Чт, 11 Дек 2014
  • Сообщений: 10703
  • Уважение: +7192
  • Позитив: +5264
  • Пол: Мужской
  • Последний визит:
    Сегодня 01:18:12

C3La-NS
Можно пример таблички? В ЛС, например. Чтобы было понятно, подо что подгонять

0

205

  • Автор: Shephard
  • Заслуженный
  • Shephard
  • Зарегистрирован: Пт, 22 Дек 2017
  • Сообщений: 228
  • Уважение: +69
  • Позитив: +104
  • Последний визит:
    Пт, 7 Июл 2023 15:56:50
Alex_63 написал(а):

Shephard
Во-первых, в блок с @media оборачивать можно не каждое правило отдельно, а все вместе: так удобнее и кода меньше.
Во-вторых, для адаптивности указывайте относительную ширину (в процентах, vw/vh (100vw = ширине вьюпорта, т.е. в данном случае окна браузера, с vh аналогично) и т.п.), а не фиксированную в пикселях т.к. на разных устройствах ширина вьюпорта будет разной, а отображаться должно одинаково на всех.

Спасибо, буду пробовать.

+1

206

  • Автор: Shephard
  • Заслуженный
  • Shephard
  • Зарегистрирован: Пт, 22 Дек 2017
  • Сообщений: 228
  • Уважение: +69
  • Позитив: +104
  • Последний визит:
    Пт, 7 Июл 2023 15:56:50
Alex_63 написал(а):

Shephard
Во-первых, в блок с @media оборачивать можно не каждое правило отдельно, а все вместе: так удобнее и кода меньше.
Во-вторых, для адаптивности указывайте относительную ширину (в процентах, vw/vh (100vw = ширине вьюпорта, т.е. в данном случае окна браузера, с vh аналогично) и т.п.), а не фиксированную в пикселях т.к. на разных устройствах ширина вьюпорта будет разной, а отображаться должно одинаково на всех.

Попробовала в инспекторе использовать относительную ширину в vw, все равно выглядит по-разному на разных устройствах. :dontknow:
P.S. А, нет, наврала, работает. Спасибо!

Отредактировано Shephard (Вт, 20 Авг 2019 12:04:17)

0

207

  • Автор: tartar1
  • поэт..
  • Зарегистрирован: Вс, 16 Апр 2017
  • Сообщений: 1688
  • Уважение: +202
  • Позитив: +1070
  • Последний визит:
    Сегодня 12:20:21

Shephard
потому что разные экраны

0

208

  • Автор: Alex_63
  • Администратор
  • Alex_63
  • Зарегистрирован: Чт, 11 Дек 2014
  • Сообщений: 10703
  • Уважение: +7192
  • Позитив: +5264
  • Пол: Мужской
  • Последний визит:
    Сегодня 01:18:12

Shephard
В идеале большинству элементов вообще ширину не задавать: блочные элементы и так растянутся автоматически по всей ширине.
Отступы от краёв и прочее можно настроить через margin, padding и box-sizing.

0

209

  • Автор: Shephard
  • Заслуженный
  • Shephard
  • Зарегистрирован: Пт, 22 Дек 2017
  • Сообщений: 228
  • Уважение: +69
  • Позитив: +104
  • Последний визит:
    Пт, 7 Июл 2023 15:56:50

Мобильный стиль в общем подкорректировала, но возникло несколько проблем:
1. В ЛС профиль автора съезжает вправо. Если начинаю его корректировать через post-autor, профиль начинает съезжать в постах форума. Как это можно исправить?
https://i.imgur.com/SbL9lljm.png
2. На экране Iphone 5/SE основная таблица съезжает вправо. Хочу подтянуть, но никак не могу найти код, в котором проблема.
https://i.imgur.com/bBg4PBlm.png
https://i.imgur.com/3SK17Cbm.png
3. Можно ли как-то изменить интервал между иконками в меню: они расположены неровно?
https://i.imgur.com/yyRMdiim.png

0

210

  • Автор: Alex_63
  • Администратор
  • Alex_63
  • Зарегистрирован: Чт, 11 Дек 2014
  • Сообщений: 10703
  • Уважение: +7192
  • Позитив: +5264
  • Пол: Мужской
  • Последний визит:
    Сегодня 01:18:12

Shephard
Можно еще раз ссылочку на форум, дабы мне не искать?)

Кстати, дополнение к уведомлениям для репутации Rusff уже вышло, см. тему уведомлений

+1

211

  • Автор: Shephard
  • Заслуженный
  • Shephard
  • Зарегистрирован: Пт, 22 Дек 2017
  • Сообщений: 228
  • Уважение: +69
  • Позитив: +104
  • Последний визит:
    Пт, 7 Июл 2023 15:56:50
Alex_63 написал(а):

Shephard
Можно еще раз ссылочку на форум, дабы мне не искать?)

http://anatomyofinspiration.rusff.ru/

Alex_63 написал(а):

Shephard
Кстати, дополнение к уведомлениям для репутации Rusff уже вышло, см. тему уведомлений

Отлично, спасибо!

+1

212

  • Автор: Alex_63
  • Администратор
  • Alex_63
  • Зарегистрирован: Чт, 11 Дек 2014
  • Сообщений: 10703
  • Уважение: +7192
  • Позитив: +5264
  • Пол: Мужской
  • Последний визит:
    Сегодня 01:18:12

Shephard
По пунктам:
1. Поставьте пиар-вход для удобства входа под пользователем (т.к. под гостем сложно понять, что там не так с личкой)

2. Вот такое для всех табличек (которые могут быть где угодно) делать точно не стоит (отсюда и смещение):

/* A2.5 */
.punbb .main table {
  table-layout: fixed;
  margin-left: 24px;
  }

3. Криво вставлен пункт меню "Награды" от Rusff, без пробела перед пунктом :dontknow:
Можно поправить, к примеру, таким образом:

#navawards::before {
  content: '\2005';
}

+1

213

  • Автор: Shephard
  • Заслуженный
  • Shephard
  • Зарегистрирован: Пт, 22 Дек 2017
  • Сообщений: 228
  • Уважение: +69
  • Позитив: +104
  • Последний визит:
    Пт, 7 Июл 2023 15:56:50
Alex_63 написал(а):

1. Поставьте пиар-вход для удобства входа под пользователем (т.к. под гостем сложно понять, что там не так с личкой)

Пиар-вход почему-то не работает. :dontknow: Создала обычный аккаунт:
Логин: Техник
Пароль: 1234

Alex_63 написал(а):

2. Вот такое для всех табличек (которые могут быть где угодно) делать точно не стоит (отсюда и смещение):

/* A2.5 */
.punbb .main table {
  table-layout: fixed;
  margin-left: 24px;
  }

Убрала это смещение. Теперь в мобильном стиле, в принципе, все нормально, но хотелось бы подвинуть блок описания форума немного вправо:
https://i.imgur.com/xQ6vkadm.png

Alex_63 написал(а):

3. Криво вставлен пункт меню "Награды" от Rusff, без пробела перед пунктом :dontknow:
Можно поправить, к примеру, таким образом:

#navawards::before {
  content: '\2005';
}

Все работает, спасибо!

0

214

  • Автор: Alex_63
  • Администратор
  • Alex_63
  • Зарегистрирован: Чт, 11 Дек 2014
  • Сообщений: 10703
  • Уважение: +7192
  • Позитив: +5264
  • Пол: Мужской
  • Последний визит:
    Сегодня 01:18:12
Shephard написал(а):

Создала обычный аккаунт:

Окей, зашёл.
Не лучший вариант, конечно, но хотя бы так:

@media screen and (max-width: 540px) {
.punbb .post .post-author {margin-left: 3.8vw!important;}
#pun-messages .post-author {margin-left: 0 !important}}

Shephard написал(а):

хотелось бы подвинуть блок описания форума немного вправо:

Возможно, как-то так)

@media screen and (max-width: 540px) {
#pun-index td div.tclcon {
width: 30vw;
padding-left: 20px!important;
margin-right: 0;
margin-left: 20px !important;
}}

+1

215

  • Автор: Shephard
  • Заслуженный
  • Shephard
  • Зарегистрирован: Пт, 22 Дек 2017
  • Сообщений: 228
  • Уважение: +69
  • Позитив: +104
  • Последний визит:
    Пт, 7 Июл 2023 15:56:50
Alex_63 написал(а):
Shephard написал(а):

Создала обычный аккаунт:

Окей, зашёл.
Не лучший вариант, конечно, но хотя бы так:

@media screen and (max-width: 540px) {
.punbb .post .post-author {margin-left: 3.8vw!important;}
#pun-messages .post-author {margin-left: 0 !important}}

Shephard написал(а):

хотелось бы подвинуть блок описания форума немного вправо:

Возможно, как-то так)

@media screen and (max-width: 540px) {
#pun-index td div.tclcon {
width: 30vw;
padding-left: 20px!important;
margin-right: 0;
margin-left: 20px !important;
}}

Спасибо огромное!

+1

216

  • Автор: Shephard
  • Заслуженный
  • Shephard
  • Зарегистрирован: Пт, 22 Дек 2017
  • Сообщений: 228
  • Уважение: +69
  • Позитив: +104
  • Последний визит:
    Пт, 7 Июл 2023 15:56:50

При использовании мобильного стиля столкнулась с такой проблемой: окошко смайликов почему-то прячется за полем набора текста, причем в инспекторе все нормально, в на IPhone такая фигня:
https://i.imgur.com/SHz00vmm.png

И еще: попробовала поставить кнопку для переключения между мобильным стилем и декстопной версией.  При переключении на декстопную версию почему-тофорум выглядит не как раньше, а криво.
https://i.imgur.com/w1y1mbXm.png

Отредактировано Shephard (Ср, 21 Авг 2019 13:51:56)

+1

217

  • Автор: Alex_63
  • Администратор
  • Alex_63
  • Зарегистрирован: Чт, 11 Дек 2014
  • Сообщений: 10703
  • Уважение: +7192
  • Позитив: +5264
  • Пол: Мужской
  • Последний визит:
    Сегодня 01:18:12
Shephard написал(а):

окошко смайликов почему-то прячется за полем набора текста, причем в инспекторе все нормально, в на IPhone такая фигня:

Попробуйте куда-нибудь в стили дописать:

form div[id$="-area"] {
  z-index: 1;
}

Shephard написал(а):

И еще: попробовала поставить кнопку для переключения между мобильным стилем и декстопной версией.  При переключении на декстопную версию почему-тофорум выглядит не как раньше, а криво.

Видимо, потому, что ширина вьюпорта так и остается равной ширине устройства (device-width) и к ней применяются правки, которые Вы внесли для экранов менее 540px в ширину. В таком случае самым простым вариантом будет отказаться от кнопки переключения, тем более что без адаптивности форумом пользоваться крайне затруднительно.

+1

218

  • Автор: Shephard
  • Заслуженный
  • Shephard
  • Зарегистрирован: Пт, 22 Дек 2017
  • Сообщений: 228
  • Уважение: +69
  • Позитив: +104
  • Последний визит:
    Пт, 7 Июл 2023 15:56:50
Alex_63 написал(а):
Shephard написал(а):

окошко смайликов почему-то прячется за полем набора текста, причем в инспекторе все нормально, в на IPhone такая фигня:

Попробуйте куда-нибудь в стили дописать:

form div[id$="-area"] {
  z-index: 1;
}

Shephard написал(а):

И еще: попробовала поставить кнопку для переключения между мобильным стилем и декстопной версией.  При переключении на декстопную версию почему-тофорум выглядит не как раньше, а криво.

Видимо, потому, что ширина вьюпорта так и остается равной ширине устройства (device-width) и к ней применяются правки, которые Вы внесли для экранов менее 540px в ширину. В таком случае самым простым вариантом будет отказаться от кнопки переключения, тем более что без адаптивности форумом пользоваться крайне затруднительно.

Спасибо!

0

219

  • Автор: Shephard
  • Заслуженный
  • Shephard
  • Зарегистрирован: Пт, 22 Дек 2017
  • Сообщений: 228
  • Уважение: +69
  • Позитив: +104
  • Последний визит:
    Пт, 7 Июл 2023 15:56:50

После включения мобильного стиля на IPad на экране стал помещаться не весь форум:
https://i.imgur.com/X0i26ikm.png
А на телефоне, если повернуть его горизонтально, появляется вот такая картина:
https://i.imgur.com/JzJLqvum.png
При перезагрузке страницы в горизонтальном положении телефона все становится нормально.
Можно ли это как-то исправить?

Отредактировано Shephard (Пт, 23 Авг 2019 18:36:41)

0

220

  • Автор: Shephard
  • Заслуженный
  • Shephard
  • Зарегистрирован: Пт, 22 Дек 2017
  • Сообщений: 228
  • Уважение: +69
  • Позитив: +104
  • Последний визит:
    Пт, 7 Июл 2023 15:56:50

Скажите, пожалуйста, можно ли в мобильной версии такие же ссылки, как на картинке, сделать и внизу страницы? А то если хочется перейти на шаг вверх приходится страницу до верха проматывать, а это не очень удобно.
http://s8.uploads.ru/t/7Rg25.jpg

0

Страница:   1 … 9 10 11 12  

Вы здесь » Единый форум поддержки » Вопросы по оформлению форума » Вопросы по мобильному стилю