Гибкое и постоянное значение ширины, заливка в браузере

[Валера Стакашкин 0]

Добрый день. сделал сайт Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

по алгоритму описанному здесь:

Вопросы:

1. При гибком 768 белый прямоугольник уводит страницу вниз, если его убрать все отображается нормально. Изменение параметров результата не дает.

2. Постоянный 1200, на планшете справа появляется полоса(как если что-то выступает за границу), если отключить серый прямоугольник(формат по ширине браузера), то все ОК. Изменение параметров результата не дает.

+ меню ведет себя не адекватно

3. Как правильно сделать заливку в браузере? на ПК все хорошо при "заполнении", но планшет и телефон не айс. Если ставлю "исходный" то планшет-телефон норм, только при скроллинге кратковременно появляется белая полоса.

p.s. Браузер везде использую Хром

Спасибо

[Павел Хомерики 3360]

1 час назад, Валера Стакашкин сказал:

Вопросы:

1. При гибком 768 белый прямоугольник уводит страницу вниз, если его убрать все отображается нормально. Изменение параметров результата не дает.

Если пребывать в стереотипах и пытаться решать существующую проблему.

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

Можно добавить css код в HEAD для этого прямоугольника:
 

<style>
 .your_class_mame_or_object_ID {
 height: auto !important;
 padding-bottom: 20px;
 }
</style>

Этот код работает, но не всегда. Почему не всегда - сие мне неведомо. Должен работать всегда. Ну и в свойствах страницы (на этой точке остановки) задать минимальную высоту например 200 px.

Теперь вариант без стереотипов, оптимизированный и с пониманием того, что можно делать на мобильных сайтах, а что нет.

Если вы планируете делать сайт используя точки остановки то:

Использование фона в браузере без прокрутки недопустимо, так как любые закрепления, в том числе и закрепленный фон, могут привести к непредсказуемым проблемам на мобильных устройствах. Если вы хотите делать закрепленный фон на компьютерной версии, то используйте альт макеты, а не точки остановки.

Использование закреплений и эффектов прокрутки на мобильных разрешениях недопустимо, это может привести к непредсказуемым проблемам на мобильных устройствах. И в том числе нарушение масштабирования ( нарушение работы мета viewport).

Отключите:

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

Белый прямоугольник, из-за которого сыр-бор, совершенно не нужен. Используйте заливку страницы и отступы колонтитулов.

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

1 час назад, Валера Стакашкин сказал:

Браузер везде использую Хром

Например, Хром не любит когда объекты растянуты на ширину страницы поверх объектов 100% ширины.  Проверяйте сначала в Firefox (обязательно) - если в этом браузере нет проблем, то с вероятностью 99%, верстка сделана у вас правильно. Дальше проверяете в Хроме и методом тыка (другого не существует) определяете причину проблемы и устраняете.

При проверке точек остановки сузив браузер (любой), перезагружайте страницу для адекватного отображения. Компьютерные браузеры отрабатывают точки остановки особенно на мобильных разрешениях, с глюками. И вы можете увидеть проблему и пытаться ее решить, но на самом деле проблемы не существует.

Всегда проверяйте на реальных устройствах. Хваленая эмуляция моб. устройств в хроме, на самом деле кривая, дальше некуда.