sajanara

Как-то так - joxi.ru/YmEkGqoCqJd5A6 , для главного родителя указываем position: relative;

Но верстка сама по себе ужасная, самый простой вариант для вас это table || display: table; и vertical-align: middle

Херассе появилась )) У вас целый плагин jQuery установлен для кнопки ))
Уберите код

<script type="text/javascript">
jQuery(function () {
      jQuery.scrollUp({
		// Element ID
        scrollName: 'scroll_to_up', 
		// Distance from top/bottom before showing element (px)
        scrollDistance: 359,
		// 'top' or 'bottom'
        scrollFrom: 'top',     
		// Speed back to top (ms)	
        scrollSpeed: 300, 
		// Scroll to top easing (see http://easings.net/)	
        easingType: 'linear',        
		// Fade, slide, none
        animation: 'fade',      
		// Animation speed (ms)	
        animationSpeed: 200,   
		// Text for element, can contain HTML
		
		scrollText: 'Scroll To Up',
		
        scrollTrigger: false,        // Set a custom triggering element. Can be an HTML string or jQuery object
        scrollTarget: false,         // Set a custom target element for scrolling to. Can be element or number
        scrollTitle: false,          // Set a custom <a> title if required.
        scrollImg: false,            // Set true to use image
        activeOverlay: false,        // Set CSS color to display scrollUp active point, e.g '#00FFFF'
        zIndex: 2147483647           // Z-Index for the overlay
    });
	
});
</script>

Вот в source страницы ее js код:

jQuery(function () {
      jQuery.scrollUp({
		// Element ID
        scrollName: 'scroll_to_up', 
		// Distance from top/bottom before showing element (px)
        scrollDistance: 359,
		// 'top' or 'bottom'
        scrollFrom: 'top',     
		// Speed back to top (ms)	
        scrollSpeed: 300, 
		// Scroll to top easing (see http://easings.net/)	
        easingType: 'linear',        
		// Fade, slide, none
        animation: 'fade',      
		// Animation speed (ms)	
        animationSpeed: 200,   
		// Text for element, can contain HTML
		
		scrollText: 'Scroll To Up',
		
        scrollTrigger: false,        // Set a custom triggering element. Can be an HTML string or jQuery object
        scrollTarget: false,         // Set a custom target element for scrolling to. Can be element or number
        scrollTitle: false,          // Set a custom <a> title if required.
        scrollImg: false,            // Set true to use image
        activeOverlay: false,        // Set CSS color to display scrollUp active point, e.g '#00FFFF'
        zIndex: 2147483647           // Z-Index for the overlay
    });
	
});

удалите его.

или добавьте в стили
#scroll_to_up {display: none}

Треугольник отдельно сверстан дивом + :before, можно сделать, используя в :before свойство transform

.comment {
  position: relative; }
  .comment .block {
    position: relative;
    border: 1px cadetblue solid;
    z-index: 1;
    height: 100px;
    width: 400px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px; }
  .comment .block__triangle {
    top: -12px;
    display: block;
    height: 12px;
    width: 20px;
    z-index: 2;
    border-bottom: white 1px solid;
    border-left: solid 1px cadetblue;
    border-top: 0;
    position: absolute; }
  .comment .block__triangle:after {
    top: -15px;
    content: "";
    display: block;
    border-bottom-left-radius: 150px;
    border-left: solid 1px cadetblue;
    border-bottom: 1px solid cadetblue;
    border-top: transparent;
    height: 12px;
    width: 20px; }

На абстрактный ответ мог бы ответить абстрактно, но отвечу с вариантами.
В зависимости от задачи, я опишу не для сервисов или больших сайтов\ресурсов.
Советую так же прочесть вот эту статью: frontender.info/building-a-better-responsive-website

Обычно использую bootstrap, который дополняю своими стилями, к примеру, сразу удаляю\перекрываю .row с его -15px margin'ом по сторонам, добавляю класс padding-0 для убирания в некоторых блоках padding'a у col- (который стандартно по 15px).

Стандартно учитываю разрешения - HD, ноутбучное 1366 и свое чуть меньше 1366 (у меня пуск справа:) ), 1024-960 - старые мониторы и нетбуки, смотрю в диапазоне 768px-960 для некоторых планшетов и телефонов, и меньше 768 для телефонов. Тут дизайн один, через media onlyscreen убираем с загрузки ненужные части.
Если все сверстано правильно и добавлены везде классы, то сайт будет полностью адаптивным.
Для тестов меньше 768px проверяю через iphone 5 и старенький android-телефон. (Через Toggle Device mode в Google Chrome получаешь очень сильно разительные результаты в сравнении с устройством - браузеры то другие, хотя большие косяки всплывают сразу.)
Тут кстати еще (мобильная) кросс-браузерность очень тонкий вопрос. Стиль у каждого браузера свой, особенно у всяких элементов типа input, так что тоже требует проверки и состояний тоже (placeholder, цвет текста в поле).

Нужно ли это? Безусловно - на любом сайте, в любой отрасли половина трафика с мобильных устройств, это уже стандарт качества, на мой взгляд:)

В данном конкретном примере:

.one {
  height: 200px;
  width: 33%;
}

.two {
  height: 200px;
  width: 33%;
}

А разве ж иллюстратор не сохраняет макет в хтмл+цсс?

(ваше значение * font-size) / 1000

Приблизительно так jsfiddle.net/soledar10/o4ex5fcg