Виталий Киренков

Так как у вас всё запущено с js, то делайте это через checkbox.

Делаете его поверх кнопки, растягиваете, ставите прозрачность - 0. Форма должна находиться физически после этого чекбокса и стилями показываете

input[type="checkbox"]:checked ~ .popover { display: block;}

Я думаю понятно да, что вам нужно будет подставить свои классы? Так вы обойдётесь без js-а.

$(function(){
var _child = $("#el").children();
})

Чего тут такого?

На боди вешать min-width. И для первой обёртки вешать оверфлоу хидден.

Raphael.js

li { width: 25%; float: left;}
@media (max-width: 960px){
li {width: 33%;}
}

Какой же ад...

Без правки стилей - никак. Ну или чутка костыльное решение - поставить
Кодеин (Кодтерпин, Кодетерп,<br> Кодепсин

codepen.io/vitaliy_kirenkov/pen/nfbwv
Происходит фокус. А какого эффекта вы хотели добиться?
Документация - www.w3.org/TR/html-markup/label.html

.class { border: 1px solid red; shadow: 0 0 0 1px grey;}

ScrollToFixed

Я так думаю, что вам нужно либо ScrollToFixed, либо Waypoints.

Да, просто поменяйте их местами.
img:hover + .hover-info { display: block;}