Михаил Горячкин

Ну что касается viewport-та то вы можете сделать что-то вроде этого:

<meta name="viewport" content="width=device-width,initial-scale=1" id="viewport" />

(function (w, d) {
	var viewport = d.querySelector('#viewport'), 
      	viewports = {
    		default:  viewport.getAttribute('content'),
    		small: 'width=320'
  		};

	var viewport_set = function() {
        screen.width <= 320 ?  viewport.setAttribute( 'content', viewports.small) :  viewport.setAttribute( 'content', viewports.default );
	}
	//При загрузке
	viewport_set();
	// При изменении
	w.onresize = function() { 
  		viewport_set(); 
	}
}(window, document));

Ну а дальше уже в css media запросами, либо при подключении:

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="mobile-device.css" />

Ну вам достаточно убрать условие if и все новые элементы будут добавляться в низ:
Вместо:

if (obj.nextSibling){
        console.log(obj.nextSibling);
        document.getElementById('inputi').insertBefore(new_input,obj.nextSibling)
    }else{ document.getElementById('inputi').appendChild(new_input);}

Оставьте:

document.getElementById('inputi').appendChild(new_input);

поменяйте их местами и будет вам счастье:
Вместо:

box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 10px rgba(23, 127, 246,0);

Надо:

box-shadow:  0 0 10px rgba(23, 127, 246,0), inset 0 1px 1px rgba(0,0,0,.075);

Грубый вариант решения вашей проблемы, ну если использовать чисто css, будет примерно такой:
HTML:

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

CSS:

ul {
    width: 70%;
    font-size: 0;
    list-style: none;
}
ul li {
    display: inline-block;
    width: 50%;
    padding: 10% 0;
    overflow: hidden;
    background-size: cover;
    background-position: 50% 50%;
}
ul li:nth-child(1) {
    background-image: url(http://untifler.narod.ru/photos/gaf8-1s.jpg);
}
ul li:nth-child(2) {
    background-image: url(http://www.gjkt.cz/files/images/budova.jpg);
}
ul li:nth-child(3) {
    background-image: url(http://imageproxy.jxs.cz/~nd04/jxs/cz~/856/512/fbafffc141_70326674_o2.jpg);
}
ul li:nth-child(4) {
    background-image: url(http://untifler.narod.ru/photos/gaf8-1s.jpg);
}
img {
    width: 100%;
}

Может вас такой вариант устроит, а иначе js вам в помощь.

Сделаете так:

.talk:before{
    content:"";
    position: absolute;
    left: 100%;
    top:  50%;
    margin-top: -13px;
    width: 0;
    height: 0;
    border-top: 13px solid transparent;
    border-left: 16px solid black;
    border-bottom: 13px solid transparent;
}

Вот вам пример как это можно сделать без js-са:
HTML:

<div id="mono">
  <input type="checkbox" name="image" id="tonggle" />
  <label for="tonggle">
    <img src="http://wikipics.net/photos/20150206142322639625248.jpg" >
  </label>
  <div id="tex">Praesent sodales suscipit eros ut tempor. Curabitur pulvinar lectus ut enim gravida dictum. Vivamus eget nunc diam. Donec nec risus dictum, ullamcorper erat non, rutrum purus. Mauris lacus nibh, ornare sit amet ipsum et, rutrum sagittis tellus. Cras tincidunt facilisis facilisis. Cras lectus elit, efficitur at est nec, dictum gravida diam. Praesent eget ex porttitor nisi egestas commodo placerat vel eros. Nam sed justo congue, lobortis felis quis, fermentum massa. Donec egestas faucibus magna vitae maximus. Integer non facilisis dolor. Maecenas posuere elit ut magna bibendum, sit amet iaculis justo tempus. Vivamus vulputate eu neque quis hendre</div>
</div>

CSS:

#mono {
  width: 500px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}
#mono label {
  width: 100%;
  height: 100%;
  display: block;
  cursor: pointer;
  z-index: 2;
  position: relative;
}
#mono input {
  position: absolute;
  left: -9999px;
}
#mono input:checked + label img {
  -webkit-transform: translate(0, -350px);
      -ms-transform: translate(0, -350px);
          transform: translate(0, -350px);
}
#mono #tex {
  position: absolute;
  padding: 20px;
  z-index: 1;
  top: 0;
  left: 0;
}
#mono img {
  width: 500px;
  position: relative;
  -webkit-transition: -webkit-transform 1s;
          transition: transform 1s;
}

Для наглядности вот вам демку накидал.

В вашем случаи например так:

.cont-title {
  background-color: green;
}
.cont-title a {
  background-color: white;
  display: inline-block;
}
.cart {
    background-color: white;
}

Добавьте эти стили к своим и получите то что хотите, ну а вместо background-color: green; добавите какой надо паттерн. Если на заднем фоне тоже паттерн, то вам надо что-то типо этого:

<div class="cont-title">
	<a href="#" class="cell">
		<h1>Заголовок</h1>
	</a>
  <div class="cell cell--mid"></div>
  <div class="cart cell">Дата</div>
</div>

.cont-title {
    display: table;  
}
.cell {
    display: table-cell;
}
.mid {
    width: 100%;
    background-color: green;
}

Ну на сайте который вы привели в пример используется метод requestAnimationFrame для запланирования перерисовки, что в итоге позволяет браузеру заранее произвести расчет для следующего кадра анимации, что в итоге дает большую плавность. Проблема только в том, что данный метод есть только в IE10+. Так что для нормальной поддержки пользовался этим кодом:

(function() {
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
        window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] 
                                   || window[vendors[x]+'CancelRequestAnimationFrame'];
    }
 
    if (!window.requestAnimationFrame)
        window.requestAnimationFrame = function(callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
            var id = window.setTimeout(function() { callback(currTime + timeToCall); }, 
              timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };
 
    if (!window.cancelAnimationFrame)
        window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
        };
}());

В свое время именно это помогло мне избавиться от тормазов при анимации.

Вот вам примерчик по быстрому накидал. Под себя я думаю сами подправите.

Если без ajax-са, то топорная заготовка вот. Но тут конечно лучше делать через ajax.

В вашем варианте так:

#bg {
  background: rgba(0,0,0,.6);
  position: fixed;
  left: 0;
  top: 0;
  width: 320px;
  height: 100%;
  z-index: 100;
  overflow: auto;
}
#form {
  width: 150px;
  min-height: 520px;
  padding: .3em 1em;
  background: #fff;
  border-radius: 12px;
  z-index: 200;
  top: 20px;  
  margin: 1em auto;
}

Итого мы получим скролл когда текста станет столько, что он не будет умещаться по высоте. Только при открытии модального окна надо бы будет ставить body overflow: hidden, чтобы не было двойного скроллбара.

Вот держите вам маленький примерчик. Надеюсь правильно понял что вам нужно.