Почему slick slider соединяет блоки?

Виталий,

а вы мне пытаетесь доказать безысходность использования слик.

где? дайте мою цитату, где я пытаюсь доказать безысходность использования слик.

Почему slick slider соединяет блоки?

Виталий,

Зачем красить фон слайдов

>> Для наглядности проблемы
(сама проблема описана выше)

Вы наверно и про отрицательные маржины не слышали, для компенсанции отступов по краям.

Я же предложил — предметно. Исправьте пример по ТЗ.

После всего перечитайте еще выше написанные строчки, я для вас их все-таки процитирую:

либо придется прибегать к дополнительным ухищрениям для компенсации этих отступов. Иногда проще сразу сделать npm install tiny-slider и всё.

И перестаньте умничать. Будьте взрослее.

Почему slick slider соединяет блоки?

Виталий, Люблю таких умников, как вы =))
А давайте поговорим не о сферических отступах в вакууме, а предметно, на конкретном примере. Вот я даже не поленился сделать его:

https://codepen.io/anon/pen/NVygjd

Для наглядности проблемы заданы жесткие размеры:
картинка 200 в ширину
промежуток 20 пикс
кол-во отображаемых слайдов — 3
отсюда ширина слайдера 200*3+20*2 = 640 пикс

Также для наглядности убран overflow и раскрашены фоны слайдов.

В идеале в видимой части слева и справа не должно быть видно фона слайдов, а промежутки между картинками должны быть ровно 20 пикс, причем по 10 от каждого слайда.

Дерзайте, умный вы наш

PS/ Решение есть, и я писал об этом выше, если внимательно читаете, а не только спорите.

Почему slick slider соединяет блоки?

Виталий, отступы будут влиять на размер слайда, т.к. сам слайдер всегда делит свой вьюпорт между слайдами на равные части. Таким образом у вас либо будут ненужные отступы по краям слайдера, либо крайние слайды будут немного других размеров, либо придется прибегать к дополнительным ухищрениям для компенсации этих отступов. Иногда проще сразу сделать npm install tiny-slider и всё.

Уехал в Москву, но не тяну по сложности, стоит ли возвращаться домой?

А чего стыдиться-то? Судя по вопросам здесь, на тостере, у нас пол России так работает, и ничего =))

Почему slick slider соединяет блоки?

Потому что у него нет соответствующей настройки.
Слайдер отличный, но часто приходится именно поэтому от него отказываться в пользу owl или tns, у которых можно в настройках задать расстояние между слайдами.

Как скрестить React и HTML-препроцессоры?

Лучше задайтесь вопросом «Зачем?»

Как написать vue для другого id?

Нежность — это главное при работе с Vue =))

Как в IT правильней называть эту страницу?

Мокап (mockup), прототип.

Можно стилизовать ползунок в input type="range" в ie11?

Зачем мучиться? Возьмите кастомный. 100% будет везде одинаково выглядеть и работать. ionden.com/a/plugins/ion.rangeslider/demo.html

Как сделать правильный вывод новостей?

mysql_fetch_array забирает одну запись. Чтобы забрать следующую, нужно вызвать функцию еще раз. Посмотрите мануал к этой функции. Там есть готовый пример.

Как переделать этот код?

AlexandraSvetik, Можно разобраться с API каждого используемого сервиса и написать все самой. Но лично мы всегда оставляем виджет яндекса. Это, как понимаете, намного проще =))

Чувствуется ли избыток специалистов по разработке на WordPress?

WP Panda,

В данном контексте - значительный (показательный)

У "значительный" не одно значение. "Пример" может быть "значимым", "показательным", имеющим важное значение, вот в этом смысле "значительным". "Изрядный" не из этой оперы.
Второе значение слова "значительный" как раз то что написал москус - сравнительная степень, и здесь слово "изрядный" является синонимом. Но так оно не применимо к "пример".

Если же употреблять "изрядный пример" в значении "хороший пример", ну не знаю... Я не слышал чтобы так говорили. Видимо сильно устаревшее значение.

Disclaimer. Если что, я не лингвист, не претендую на истину =))

Как лучше сверстать этот блок?

Дополню кодом от нефиг делать =)

Как лучше было бы сверстать этот блок?

Дмитрий, не будет единственно правильного ответа. Шрифты лучше задавать в rem/em, но где-то нужны vw или %, а где-то и пиксели.
Отступы/размеры где-то зависят от родителей и задаются в процентах, где-то от шрифта и задаются в rem/em, а где-то и фикс нужен в пикселях.

Плох ли @import css в 2019 году с http2?

импорт плох тем, что это блокирующая операция.

Как подключить все медиа запросы через отдельный css файл?

Дмитрий, предположение одно — файл некорректно подключен. пути не те, или он отсутствует.

<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/media.css">

Это должно работать

Как подключить все медиа запросы через отдельный css файл?

Дмитрий, а зачем вы подключаете style.less и style.css ?
Я думаю стоит определиться — либо ваши стили будут компилироваться в браузере, либо подключаться уже скомпилированные.
Для того что бы работал первый вариант (style.less) я не вижу у вас подключенного компилятора (less.js).

Складывается ощущение, чтобы вы пока вообще не понимаете что делаете :))

Как подключить все медиа запросы через отдельный css файл?

Дмитрий, я об использовании атрибута media в теге.
У вас медиазапросы описаны в файле, ни к чему этот атрибут. Просто подключите файл.

Как подключить все медиа запросы через отдельный css файл?

а смысл?