Павел Антонов

Вот вам решение картинку оборачиваете в div и смотрите свойства div'а

в css добавить

p{
   margin: 0;
}

<table></table>

Проходите циклом по msg.data и в элемент table подставляете строки с нужными ячейками примерно так

$("table").append("<tr><td>"+msg.data.наименование+"</td></tr>")

На качество не претендую его там нет :D
но поковырялся полчасика

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

Нет

Использовать классы pull или push

здесь не подойдет, немного не та структура

Я бы решил это так, набросал наскоряк.

Да есть небольшое дублирование кода, в частности меню, но без него никак, либо пилить 2 разных шапки под разные разрешения либо меню дублировать.

P.S. Еще можно решить при помощи js, просто на разрешениях ниже 768 вырезать меню и делать appendTo в нужное место. Тут уже вам решать, что удобнее/лучше в вашем случае. Надеюсь помог.

.class{
   //стили класса
}
.class:hover{
   //стили класса при наведении
}

Как то так, скорее всего ваш z-index не отработал потому что не указали position:relative картинке
https://codepen.io/freislot/pen/GOoLpQ

никак, менять структуру верстки и делать элементы визуально так как надо, но без вложенности

https://jsfiddle.net/qgkfc0fe/

добавил before у .butt

Это все знается по дефолту, а флекс учится за полчаса, потом практика.
Где-то на тостере уже давали ссылку эту, очень хорошее пособие по флексам flexboxfroggy.com

Здесь поможет повесить на body position relative если нет то обернуть весь контент в div.wrapper например и ему давать overflow, это особенности ios

В общем ни один из вариантов не подошел, использовал jquery sly сделал все как по макету, и скролл и стрелки и превьюхи, всем спс

По ховеру выполнять вызов следующего/предыдущего слайда

$("#идентификатор вашей карусели").slick('slickNext'); //следующий слайд
$("#идентификатор вашей карусели").slick('slickPrev'); //предыдущий слайд

Ну и примерно так вешаете на ховер эти действия:

$("левый край карусели").hover(function(){
   $("#идентификатор вашей карусели").slick('slickPrev')
})

Сделал 2мя паралельными слайдерами, связал их js между собой, вопрос закрыт.
Результат тут

$(".класс кнопки").click(function(){
    $(".класс меню").toggleClass("visible");
})

.класс меню{
   overflow:hidden;
   width:0; 
   transition:all 0.2s ease;
}
.класс меню.visible{
   width:700px; //например   
}

пример тут

Можно не width менять а позицию left/right все зависит от вашего макета)

Всё сверстал, додумался как сделать лучше :) всем спс помог position:absolut и отрицательный left для позиционирования зеленой полосы

обновил свой пример из вопроса в связи с правильным решением, готовый вариант получился такой

я думаю можно, я бы сделал div'ами с разным border-radius'ом ну и position:absolute, думаю пригодился бы

codepen.io/freislot/pen/ZLoaKd
Примерно так, ну вы понимаете это на скорую руку в качестве примера, нет времени выставлять все красиво, думаю суть моего метода ясна

Даниил Шарко @scronheim
Чет не работает

var width;
jQuery("tr td:last-child").click(function(){
width = jQuery("#myTbl").width();
jQuery("#myDiv").append("<div style='width:"+width+"px'></div>");
})

А вы вот так сделайте :))
P.S нет у тега div атрибута width, есть атрибут style с нужными свойствами) повнимательнее надо

Разобрался с PACE, вопрос снят, извините

В гугле же есть