indenger20

Рейтинг
38
Регистрация
07.03.2015

в конце стилей добавьте


#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;
}
svv:
Правильно я понимаю, что с помощью @media only screen и делается адаптивный дизайн просто некоторые DIVы скрываются в более узких версиях?

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

то есть


.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, а отмены обтекания нет, поэтому родитель схлопывается

решение


.contain {
overflow: hidden;
}

или


.contain {
position: relative;
}
.contain:after {
content='';
display: table;
clear: both;
}

второй вариант предпочтительней

я же говорю, подключите отдельно этот скрипт


<script>
function foo() {
window.scrollTo(0, 0);
} foo();
</script>
Всего: 248