Как сделать фон полной ширины на мобильном телефоне?

Я использую полноразмерный фон на своем веб-сайте, который расширяется за пределы контейнера div, ср. http://www.csselectronics.com/ (ближе к концу).

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

<link rel="stylesheet" media="screen and (max-width: 600px)" href="http://canlogger1000.csselectronics.com/lightbox/FullWidth_Mobile_v17.css">

<link rel="stylesheet" media="screen and (min-width: 601px)" href="http://canlogger1000.csselectronics.com/lightbox/FullWidth_Big.css">

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

Любая помощь высоко ценится!

Мартин


mobile css horizontal-scrolling full-width
person Martin    schedule 02.07.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы имеете в виду блок внизу с надписью «Мощный, простой, доступный» и т. д.?

Нет простого способа сделать это без изменения HTML, если только вы не добавите width: 120% или что-то в этом роде, чтобы заставить блок переполнить контейнер, но это вызовет горизонтальную прокрутку, как вы упомянули.

Гораздо проще было бы, если бы вы взяли блок из обычного контейнера и использовали для него новый блок HTML.

Так и будет, (грубый пример)

<div class="container>
// Your regular content here
</div>

//In this grey block, make it width 100% and add the content you want
<div class="grey-block">
//So the content inside will still be aligned with the rest of the page
<div class="container">
</div>
</div>

//Continue with the rest of the page
<div class="container>
</div>
person Erick T.    schedule 03.07.2017
comment
Спасибо за ответ - я хотел бы сделать это, но, к сожалению, я работаю над платформой электронной коммерции, где этот уровень выбора недоступен. т.е. Я вынужден работать в уже установленном базовом контейнере div. Не знаю, можно ли что-то сделать в этом случае? - person Martin; 03.07.2017
comment
Позволяет ли платформа e-com добавлять код Javascript/jQuery? Если это так, вы можете просто отсоединить блок и поиграть с DOM, чтобы добавить его обратно. - person Erick T.; 03.07.2017