iBird Rose

всмысле а что ты хочешь сделать? увеличить раз не можешь то тока обрезать текст через
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

у тебя там не только в этом элементе дело. у тебя вся верстка кривая

потому что количество th внутри tr должно быть равно количеству td внутри своих tr. а у тебя в thead 7 штук th, а в tbody td не 7 штук внутри своих tr

h1 - это и есть div по сути (тобишь твой блок (квадрат))
отличиний никаких нет

в обоих примерах на фоне видео. работает же

css - не не слышал) по старинке обрезаешь треугольник и у :after и :before бэкграунд с repeat-y ^___^

а почему они по клику должны меняться, если там draggable стоит? тобишь нужно схватить и тянуть. как мышкой, так и табом на телефоне
p.s. а если ты про нижний ряд, то он не срабатывает из за задержки слайдера. тобишь пока слайд окончательно с анимацией не завершится - ты не сможешь на что то другое кликнуть

а не легче поставить эту картинку везде и убирать ее при ховере?

а ты для transition все префиксы написал? IE вроде норм дружит с transition же

он кажись имел ввиду уходящий за экран. в общем делаешь блоку float: right; и чтобы спрятать вправо - просто с transition меняешь блоку width до нуля. и будет эффект как будто он уходит вправо. ну и overflow: hidden не забудь

скорее всего из за хрома. в ней есть такая штука как direct write

он херачит шрифты как ей вздумается

уменьшая ширину блока через media.
p.s. потому что это инлайн блок. там есть отступы присущие инлайн элементам. они и не дают нужной ширины

не сможешь ты нормально 2 элемента в один after засунуть. делай отдельно. и ровняй через absolute
https://jsfiddle.net/zdn1Lm6t/1/

display: inline-block тоже будет плыть как и float при разных высотах.
гугли плиточную расстановку. вот по первой ссылке из гугла dbmast.ru/adaptivnye-html-bloki-v-vide-kirpichnoj-...

заходишь сюда и удаляешь все что касается адаптивки и гридов getbootstrap.com/customize