squirtazzer: Сначала идут свойства без media, а потом с ними. Иначе свойства без media перебьют те, которые с условиями.
Ну вы хоть раз-то в консоль бы загляглянули. Я уже и примеры действия показала и на скринах.
Не нравятся мои примеры, посмотрите как устроен бутстрап, разберитесь, что в нем написано.
Если вы пишете mobile-first, то сначала идут общие свойства без media те, которые для мобильных устройств. Потом в порядке увеличения min-width с соответствующими свойствами.
Если наоборот, сначала десктопы, то значит сначала идут общие свойства которые отвечают за все и красиво выглядят на десктопах. А потом max-width в порядке убывания.
У вас в коде каша.
Определитесь в каком порядке вы работаете - в том и напишите.
Криво сейчас еще потому что:
Доступное место 100%.
У вас 3 блока по 31%.
Остается 7%.
Все прекрасно, но у вас почему-то margin написан в пикселях. Где-то 90 точек (15px*6 ) впишутся в оставшиеся 7%, где-то нет.
Тут нет никакой запредельщины, это математика какого-то там класса.
Пожалуйста, читайте теорию.
Иначе вам путь не на тостер, а на фриланс.
squirtazzer:
Вы все стили запихали в мобильные.
Но ведь рамки и все остальная красота должна действовать всегда.
На мобилках изменяется только ширина блочика и wrap у родителя.
Простая же логика.
Виталий Ильницкий: я плохо понимаю, что вы имеете в виду, но у меня она и сейчас перемещается (сам скролл при этом выглядит странно, то есть то нет, но функциональность определенно есть)
Теперь, например, при сжатом окошке открываем инспектор стилей и смотри "а почему же фон именно голубой?"
И там, в инспекторе написаны ВСЕ свойства, которые влияют на нужный элемент и видно кто и почему какие свойства перебивает. Справа даже написано в каком файле и в какой строчке эти правила написаны. (У меня прямо в индексе, ну просто потому что это jsfiddle, у вас будет указан какой css).
На вкладке styles будет эта же информация в другом виде. Там видно какие media участвуют и какие свойства зачеркнуты.
Основные стили перебили эти самый условия. (Смотрите в инспекторе кода)
500px в условиях это, кстати, от балды взято, поставьте столько сколько нужно на вашем сайте.
Использовать min-width или max-width это тоже ваш выбор.
Мне больше нравится max и иду сверху вниз.
У бутстрапа другой (обратный) подход, mobile-first.
Вам на фриланс с такими формулировками.