Андрей Хохлов

svg + Raphael.js
Цвета будут меняться не через смену классов, а с помощью js
А вот адаптивность тут конечно мимо.
На 320px там пальцем то не особо попадешь в эти квадратики.

Была ситуация, когда на адаптивном сайте присутствовали таблицы, создаваемые в визивиге, и имеющиеся приемы адаптивность таблиц не подходили.
В итоге я сделал минимальную ширину для блока таблицы что-то в районе 720, и обернул его в блок с горизонтальной прокруткой.
Получилось, что сайт адаптивный, все как надо, а таблицу можно рассмотреть легким свайпом.

Да как бы элементарно - на главной в цикле вывода постов используйте один шаблон, в single.php - другой
Дело за малым - почитать как формируются страницы вп, из каких частей и по какой логике.

Начнем с банального

Ctrl+F5 не помогает?

1. У li в меню "display: inline-block", так как размер шрифта не 0, между такими элементами помещается 1 пробел
2. Блок высотой 19px, а картинка 79px

Такая кнопка должна быть просто по центру. Задайте ей паддинги как в макете и все.
Потому что сегодня на кнопке один текст, а завтра может быть другой.

Используйте Grunt или Gulp.

Я Grunt использую: один таск компилит less в css (читабельный), другой - минифицирует css

Sticky kit попробуйте leafo.net/sticky-kit

Должно помочь

#menu li {
display: inline-block
}

вместо float: left

А вообще верстка не очень хорошая, много странных моментов (например абсолютно-позиционированное .mymenu-wrap )

Выкладывать для просмотра минифицированный код, объединяя все css в 1 файл. Аналогично с js.
если это не разовый лендинг, а проект который планируют развивать - проще будет заплатить.

$post_thumbnail_url =  wp_get_attachment_image_src (get_post_thumbnail_id($post->ID), 'thumbnail', true);
echo '<div style="background: url('.$post_thumbnail_url.')"></div>

Имхо проще сделать с masonry, чем лепить костыли в цикл wp