текстовые блоки наползают друг на друга при просмотре в разных браузерах

Вопросы, связанные с адаптивным и мобильным веб-дизайном в WYSIWYG Web Builder.
Правила форума
1. Название темы должно кратко описывать суть вашего вопроса, темы типа: "Помогите", "Почему", "Что это", "Что-то глючит" - будут удаляться.
2. Задавая свой вопрос, постарайтесь предоставить максимум информации о проблеме, если есть возможность, приложите шаблон проекта *.wtp.
Подробнее: Правила создания новых тем и ответов на существующие темы.
Данный форум - это место обсуждения вопроса, а не техподдержка в классическом смысле. Все участники форума Web Builder по-русски с удовольствием вам помогут, если это будет в их силах.
Ответить Вложения 4
Аватара пользователя

Автор Темы
www2019
Читатель
Читатель
Сообщения: 9
Зарегистрирован: 11 авг 2019, 10:38
Версия Web Builder: 14.2.2

текстовые блоки наползают друг на друга при просмотре в разных браузерах

Сообщение www2019 » 18 июл 2022, 14:09

Делаю адаптивный сайт. Web Bulider 14.
Несколько довольно больших текстовых блоков расположены вертикально в столбик.
Проблема в изменении нижней границы блоков при просмотре в разных браузерах. В одних получаются слишком большие промежутки, в других, наоборот текст наползает друг на друга.
Чем меньше ширина экрана, тем более усугбляется ситуация. Конкретно для точки останова с шириной экрана 360, вот как это выглядит на разных телефонах:
phone_a2.JPG
phone_b2.JPG

Шрифт везде одинаковый, 13.
Похоже, либо на разных телефонах/браузерах отображаемый размер шрифта немного варьируется. Либо активная область экрана имеет какие-то поля по бокам, из-за чего фактическая ширина текста сужается, а высота увеличивается. Хотя ширина изображения в шапке страницы точно соответствует ширине экрана в обоих случаях. Так и не смог разобраться, в чём именно дело.

Вот здесь больше картинок для лучшего понимания, о чём речь:
https://fex.net/s/oblc9ed
здесь файлы проекта:
https://fex.net/s/r6b6l0d

В чём тут может быть причина, и какими способами можно с этим бороться ?
Буду благодарен за любую помощь.
У вас нет необходимых прав для просмотра вложений в этом сообщении.

Реклама
Аватара пользователя

anonimus
Moderator
Moderator
Сообщения: 5193
Зарегистрирован: 12 июн 2012, 07:12
Версия Web Builder: 12.0.2
Имя: Анатолий Webmaster
Контактная информация:

текстовые блоки наползают друг на друга при просмотре в разных браузерах

Сообщение anonimus » 21 июл 2022, 11:09

у меня никогда и ничего не съезжало подобным образом, к4ак у вас на картинках
я вам вообще советую скачать 16-17 версию и делать адаптивные сайты на сетках
а вашем случае рекомендую использовать плавающие слои и текст помещать в них
забыл, есть ли в 14 версии сетки, если есть, то верстайте на них
можно в гибридном режиме использовать сетки и плавающие слои
Подключение формы обратной связи Wysiwyg Web Builder к телеграмму (заявки будут приходить на почту и в телегу, даже с прикреплёнными файлами и картинками)
**** Аудит ваших проектов (сайтов) на предмет ошибок и различного рода проблем! ****
>>> Ускорение загрузки ваших сайтов >>>
Консультации по WebBuilder, обучение эффективной и главное правильной работе в программе Wysiwig Web Builder.
Решение проблем с вашими проектами, разработка структуры сайта и его функционала, адаптация и оптимизация под мобильные тел и планшеты.
Создание и дизайн сайтов, решение проблем с готовыми сайтами, прочие работы в интернете (домены, хостинг и т.п.)
Оптимизация сайта под продвижение в поисковых системах ( seo )
==============
Более подробное описание услуг https://wysiwygwebbuilder.ru/forum/viewtopic.php?f=54&t=975
Емаil: mailrobot@wwbmaster.ru
Telegram: @HTMLPLUSRU
==============

Аватара пользователя

Автор Темы
www2019
Читатель
Читатель
Сообщения: 9
Зарегистрирован: 11 авг 2019, 10:38
Версия Web Builder: 14.2.2

текстовые блоки наползают друг на друга при просмотре в разных браузерах

Сообщение www2019 » 21 июл 2022, 13:54

Спасибо за ответ.
Ну, собственно после того, как потратил кучу времени, пришёл примерно к такому же выводу. Со статическими слоями эту проблему не победить.
Пока самым удобным показалось использование flexbox контейнеров. Насколько понял, это одна из разновидностей сетки.
Плавающие слои гляну. В 14-й версии всё это есть.

Аватара пользователя

anonimus
Moderator
Moderator
Сообщения: 5193
Зарегистрирован: 12 июн 2012, 07:12
Версия Web Builder: 12.0.2
Имя: Анатолий Webmaster
Контактная информация:

текстовые блоки наползают друг на друга при просмотре в разных браузерах

Сообщение anonimus » 21 июл 2022, 14:03

Ваше утверждение "Со статическими слоями эту проблему не победить.", не верное. Раньше только это и было доступно. Но лучше что бы эти слои были плавающими.
Подключение формы обратной связи Wysiwyg Web Builder к телеграмму (заявки будут приходить на почту и в телегу, даже с прикреплёнными файлами и картинками)
**** Аудит ваших проектов (сайтов) на предмет ошибок и различного рода проблем! ****
>>> Ускорение загрузки ваших сайтов >>>
Консультации по WebBuilder, обучение эффективной и главное правильной работе в программе Wysiwig Web Builder.
Решение проблем с вашими проектами, разработка структуры сайта и его функционала, адаптация и оптимизация под мобильные тел и планшеты.
Создание и дизайн сайтов, решение проблем с готовыми сайтами, прочие работы в интернете (домены, хостинг и т.п.)
Оптимизация сайта под продвижение в поисковых системах ( seo )
==============
Более подробное описание услуг https://wysiwygwebbuilder.ru/forum/viewtopic.php?f=54&t=975
Емаil: mailrobot@wwbmaster.ru
Telegram: @HTMLPLUSRU
==============

Аватара пользователя

Автор Темы
www2019
Читатель
Читатель
Сообщения: 9
Зарегистрирован: 11 авг 2019, 10:38
Версия Web Builder: 14.2.2

текстовые блоки наползают друг на друга при просмотре в разных браузерах

Сообщение www2019 » 21 июл 2022, 15:00

Хорошо, тогда поясните, как это можно сделать. Или скиньте пример со статическими слоями, которые на разных компьютерах и в разных браузерах будут отображаться чётко на своих местах.
Очень интересно. У меня, несмотря на все усилия, не получилось.

Аватара пользователя

anonimus
Moderator
Moderator
Сообщения: 5193
Зарегистрирован: 12 июн 2012, 07:12
Версия Web Builder: 12.0.2
Имя: Анатолий Webmaster
Контактная информация:

текстовые блоки наползают друг на друга при просмотре в разных браузерах

Сообщение anonimus » 21 июл 2022, 15:05

так вы пробовали придать слоям свойство плавающих?
Подключение формы обратной связи Wysiwyg Web Builder к телеграмму (заявки будут приходить на почту и в телегу, даже с прикреплёнными файлами и картинками)
**** Аудит ваших проектов (сайтов) на предмет ошибок и различного рода проблем! ****
>>> Ускорение загрузки ваших сайтов >>>
Консультации по WebBuilder, обучение эффективной и главное правильной работе в программе Wysiwig Web Builder.
Решение проблем с вашими проектами, разработка структуры сайта и его функционала, адаптация и оптимизация под мобильные тел и планшеты.
Создание и дизайн сайтов, решение проблем с готовыми сайтами, прочие работы в интернете (домены, хостинг и т.п.)
Оптимизация сайта под продвижение в поисковых системах ( seo )
==============
Более подробное описание услуг https://wysiwygwebbuilder.ru/forum/viewtopic.php?f=54&t=975
Емаil: mailrobot@wwbmaster.ru
Telegram: @HTMLPLUSRU
==============

Аватара пользователя

Автор Темы
www2019
Читатель
Читатель
Сообщения: 9
Зарегистрирован: 11 авг 2019, 10:38
Версия Web Builder: 14.2.2

текстовые блоки наползают друг на друга при просмотре в разных браузерах

Сообщение www2019 » 21 июл 2022, 15:06

Плавающие ещё не пробовал. Я сейчас про статические говорю.

Аватара пользователя

anonimus
Moderator
Moderator
Сообщения: 5193
Зарегистрирован: 12 июн 2012, 07:12
Версия Web Builder: 12.0.2
Имя: Анатолий Webmaster
Контактная информация:

текстовые блоки наползают друг на друга при просмотре в разных браузерах

Сообщение anonimus » 21 июл 2022, 15:26

не понимаю, а зачем такая принципиальность именно на статическом, а не плавающем? Просто так хочу или есть причина?
Подключение формы обратной связи Wysiwyg Web Builder к телеграмму (заявки будут приходить на почту и в телегу, даже с прикреплёнными файлами и картинками)
**** Аудит ваших проектов (сайтов) на предмет ошибок и различного рода проблем! ****
>>> Ускорение загрузки ваших сайтов >>>
Консультации по WebBuilder, обучение эффективной и главное правильной работе в программе Wysiwig Web Builder.
Решение проблем с вашими проектами, разработка структуры сайта и его функционала, адаптация и оптимизация под мобильные тел и планшеты.
Создание и дизайн сайтов, решение проблем с готовыми сайтами, прочие работы в интернете (домены, хостинг и т.п.)
Оптимизация сайта под продвижение в поисковых системах ( seo )
==============
Более подробное описание услуг https://wysiwygwebbuilder.ru/forum/viewtopic.php?f=54&t=975
Емаil: mailrobot@wwbmaster.ru
Telegram: @HTMLPLUSRU
==============

Аватара пользователя

anonimus
Moderator
Moderator
Сообщения: 5193
Зарегистрирован: 12 июн 2012, 07:12
Версия Web Builder: 12.0.2
Имя: Анатолий Webmaster
Контактная информация:

текстовые блоки наползают друг на друга при просмотре в разных браузерах

Сообщение anonimus » 21 июл 2022, 15:35

Хотя можете глянуть. Здесь
Подключение формы обратной связи Wysiwyg Web Builder к телеграмму (заявки будут приходить на почту и в телегу, даже с прикреплёнными файлами и картинками)
**** Аудит ваших проектов (сайтов) на предмет ошибок и различного рода проблем! ****
>>> Ускорение загрузки ваших сайтов >>>
Консультации по WebBuilder, обучение эффективной и главное правильной работе в программе Wysiwig Web Builder.
Решение проблем с вашими проектами, разработка структуры сайта и его функционала, адаптация и оптимизация под мобильные тел и планшеты.
Создание и дизайн сайтов, решение проблем с готовыми сайтами, прочие работы в интернете (домены, хостинг и т.п.)
Оптимизация сайта под продвижение в поисковых системах ( seo )
==============
Более подробное описание услуг https://wysiwygwebbuilder.ru/forum/viewtopic.php?f=54&t=975
Емаil: mailrobot@wwbmaster.ru
Telegram: @HTMLPLUSRU
==============

Аватара пользователя

Автор Темы
www2019
Читатель
Читатель
Сообщения: 9
Зарегистрирован: 11 авг 2019, 10:38
Версия Web Builder: 14.2.2

текстовые блоки наползают друг на друга при просмотре в разных браузерах

Сообщение www2019 » 21 июл 2022, 16:00

Статические удобнее верстать. Хотел сделать максимально просто и не предполагал, что такой геморой вылезет.

Посмотрел вашу ссылку. Спасибо.
Блоки текста также расползаются.
Вот как выглядит на телефоне Haier A1, браузер Chrome:
IMG_20220721_145314.jpg


А вот так на телефоне Redmi с родным оригинальным браузером:
IMG_20220721_145427.jpg
У вас нет необходимых прав для просмотра вложений в этом сообщении.

Аватара пользователя

anonimus
Moderator
Moderator
Сообщения: 5193
Зарегистрирован: 12 июн 2012, 07:12
Версия Web Builder: 12.0.2
Имя: Анатолий Webmaster
Контактная информация:

текстовые блоки наползают друг на друга при просмотре в разных браузерах

Сообщение anonimus » 21 июл 2022, 16:23

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

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

делайте на плавающих или лучше на сетках, как я вам уже сказал и не заморачивайте никому мозг)))
Подключение формы обратной связи Wysiwyg Web Builder к телеграмму (заявки будут приходить на почту и в телегу, даже с прикреплёнными файлами и картинками)
**** Аудит ваших проектов (сайтов) на предмет ошибок и различного рода проблем! ****
>>> Ускорение загрузки ваших сайтов >>>
Консультации по WebBuilder, обучение эффективной и главное правильной работе в программе Wysiwig Web Builder.
Решение проблем с вашими проектами, разработка структуры сайта и его функционала, адаптация и оптимизация под мобильные тел и планшеты.
Создание и дизайн сайтов, решение проблем с готовыми сайтами, прочие работы в интернете (домены, хостинг и т.п.)
Оптимизация сайта под продвижение в поисковых системах ( seo )
==============
Более подробное описание услуг https://wysiwygwebbuilder.ru/forum/viewtopic.php?f=54&t=975
Емаil: mailrobot@wwbmaster.ru
Telegram: @HTMLPLUSRU
==============

Аватара пользователя

Автор Темы
www2019
Читатель
Читатель
Сообщения: 9
Зарегистрирован: 11 авг 2019, 10:38
Версия Web Builder: 14.2.2

текстовые блоки наползают друг на друга при просмотре в разных браузерах

Сообщение www2019 » 21 июл 2022, 16:26

ОК, замётано :)

Аватара пользователя

thebest
Читатель
Читатель
Сообщения: 3
Зарегистрирован: 17 авг 2022, 13:00
Версия Web Builder: 9

текстовые блоки наползают друг на друга при просмотре в разных браузерах

Сообщение thebest » 26 авг 2022, 14:55

Скорее всего в свойствах текста "на выходе" у тебя выставлена позиция для каждой линии. Поиграй с этим. Лично я сбросил настройки текста и выставил по умолчанию.

Аватара пользователя

Автор Темы
www2019
Читатель
Читатель
Сообщения: 9
Зарегистрирован: 11 авг 2019, 10:38
Версия Web Builder: 14.2.2

текстовые блоки наползают друг на друга при просмотре в разных браузерах

Сообщение www2019 » 30 авг 2022, 09:47

Со свойствами "на выходе" игрался. Не помогает.
В итоге забил на слои и сделал на flexbox.


Ответить Вложения 4

Вернуться в «Адаптивный и мобильный веб-дизайн.»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 1 гость