Mr Crabbz

<meta name="viewport" content="width=640, user-scalable=no, initial-scale=1.0">

Ну, собственно, вы какой ответ то ждёте? «Автор молодец, твои работы - шедевр, пиши еще»?
Это вы уже сами решите - нужно ли вам этим заниматься. Попробуйте силы в фрилансе. На каждый товар есть свой покупатель - главное с ценой не прогадать.

Если оценить нужно вёрстку - то ничего особенного или сложного в работах нет абсолютно. Самые простые макеты.

Если оцениваем еще и дизайн - откровенно слабо.

Но это не значит, что всё "мои работы обгадили, пошел я в монастырь". В этой сфере решает в первую очередь опыт.

Самое правильное тут:

* {
   box-sizing:border-box;
}

А чтобы проще с адаптивом было, я обычно стараюсь максимально использовать % в размерах блоков. Потом гораздо проще адаптив верстать.

Вам конкретно для этого img в единичном экземпляре? Или же для всех таких img в списках?

У вас же есть родительский a.post-image:
.post-image img

У вас в codepen папка называется "images"., а тут в примере - "img". Смею предположить, что вы работаете с заливкой файлов по фтп. Возможно, изначально ваша папка называлась "images" (и так и залилась на сервер), а потом вы локально переименовали папку, а на серваке папка осталась "images".

зы. бекграунд и background-size:cover не подходят ибо через js идет рендом картинки при загрузке и смена её по времени.

в чем проблема через js добавлять inline-стиль style="background-image:...." ?

Как вариант

У вас скорее всего очень нагруженный и не оптимизированный код самой страницы + графика без оптимизации и так далее.

Покажите ссылку что ли.

У вас по вызову watchlist(); что происходит то? Вывод html-кнопки или непосредственно добавление в закладку при загрузке страницы?

Покажите финальный html.

relative не позволит вам сделать bottom:0 относительно родителя. При relative элемент будет спозиционирован относительно самого себя.
Вам нужно заменить relative на absolute у этого элемента, а его родителю как раз назначить relative. Таким образом absolute привяжется к ближайшему в структуре DOM элементу с relative'ом (в данном случае - к родителю).

Так width:100% же будет равняться полной ширине родительского элемента. В вашем случае скорее всего body, который в свою очередь скорее всего принимает ширину вьюпорта. Ну и вьюпорт скорее всего меньше, чем фон.

в sublime text выделите строки - потом shift+tab несколько раз.

Не совсем понятно что именно нужно сделать с этими кружками при помощи градиента. Покрасить кружки?

почитайте про meta initial scale и user-scalable. Вероятнее всего у вас в телефоне включено масштабирование по умолчанию, из за чего может ехать вёрстка.