в конце стилей добавьте
#container { background: #fff; position: relative; z-index: 1; } .effect-1:before, .effect-1:after { position: absolute; z-index: -1; } #header { float: none; }
вроде бы как то так
Вы бы поиском пользоваться научились, здесь топиков много уже было таких.
/ru/forum/918936
/ru/forum/646555
либо blexbox,
либо display: table-cell вместо float-a, или что у вас там
со вторым вариантом, опечатка
.contain { position: relative; } .contain:after { content:''; display: table; clear: both; }
Да. С помощью этих запросов, мы для одного блока, можем писать разные стили, в зависимости от ширины экрана
то есть
.col-1 {//стили работают при любой ширине width:33%; display:inline-block; padding: 0 15px; box-sizing: border-box;}@media only screen and (max-width : 400px) { //при ширине экрана меньше или равно 400px ширина блока становится 100%.col-1 { width:100%; //перекрыло ширину, которая задана выше}}
https://jsfiddle.net/xk1o35sc/---------- Добавлено 16.02.2016 в 11:37 ----------и min-width нужно удалить)
да, еще родителю надо задать
.td { font-size: 0;}
и " !important "проверьте, что бы не стоял---------- Добавлено 16.02.2016 в 11:18 ----------для этого есть медиа запросы
.col-1 { min-width: 330px; width:33%; display:inline-block; padding: 0 15px; box-sizing: border-box; vertical-align: top;}@media only screen and (max-width : 1100px) {.col-1 { width:33%;}}@media only screen and (max-width : 600px) {.col-1 { width:50%;}}@media only screen and (max-width : 400px) {.col-1 { width:100%;}}
ну наверное как-то так
.col-1 { min-width: 330px; width: 100%; }
это одна колонка
если хотите в 3 колонки
.col-1 { min-width: 330px; width:33%; display:inline-block; padding: 0 15px; box-sizing: border-box; }
и уберите у себя в стилях !important
нельзя так делать
все правильно скролит, у вас в этих блоках задан float, а отмены обтекания нет, поэтому родитель схлопывается
решение
или
второй вариант предпочтительней
я же говорю, подключите отдельно этот скрипт