Как получить полный фон на мобильный?

Question

Я использую фон полной ширины на моем сайте, который выходит за пределы контейнера 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% видимой ширины. Я пробовал много вещей, но я всегда сталкиваюсь с проблемой, что я расширяю представление, чтобы пользователь мог прокручивать по горизонтали, чего я хотел бы избежать.

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

Мартин

Answer 1

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

Нет простого способа сделать это без изменения 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>