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%; //перекрыло ширину, которая задана выше } }
в конце стилей добавьте
вроде бы как то так
Вы бы поиском пользоваться научились, здесь топиков много уже было таких.
/ru/forum/918936
/ru/forum/646555
либо blexbox,
либо display: table-cell вместо float-a, или что у вас там
со вторым вариантом, опечатка
Правильно я понимаю, что с помощью @media only screen и делается адаптивный дизайн просто некоторые DIVы скрываются в более узких версиях?
Да. С помощью этих запросов, мы для одного блока, можем писать разные стили, в зависимости от ширины экрана
то есть
https://jsfiddle.net/xk1o35sc/
---------- Добавлено 16.02.2016 в 11:37 ----------
и min-width нужно удалить)
да, еще родителю надо задать
и " !important "проверьте, что бы не стоял
---------- Добавлено 16.02.2016 в 11:18 ----------
для этого есть медиа запросы
ну наверное как-то так
это одна колонка
если хотите в 3 колонки
и уберите у себя в стилях !important
нельзя так делать
все правильно скролит, у вас в этих блоках задан float, а отмены обтекания нет, поэтому родитель схлопывается
решение
.contain {
overflow: hidden;
}
или
.contain {
position: relative;
}
.contain:after {
content='';
display: table;
clear: both;
}
второй вариант предпочтительней
я же говорю, подключите отдельно этот скрипт
<script>
function foo() {
window.scrollTo(0, 0);
} foo();
</script>