Ivan Tokar

Если я правильно понял ваш вопрос то просто дайте картинке max-width: 100%, по горизонтали можете сентрировать ее или text-align: center в родителе или margin: 0 auto, а если вам надо и по вертикали то посмотрите тут

$('.notmain > span').on('click', function() {
    var text = $(this).text();
    $('#input').val(text);
});

owl.carousel использую, удобная, адаптивная, гибкая, советую

С формой такое не пройдет, надо использовать отмену стандартного поведения формы
event.preventDefault();
event укажи как параметр функции которую вызываешь

Попробуйте этот плагин
Waypoints
Пример:

var waypoint = new Waypoint({
  element: document.getElementById('thing'),
  handler: function(direction) {
    alert('You have scrolled to a thing')
  }
})

Попробуйте разобраться в концепции mobile first, У вас написано в media queries min-width, а это надо понимать как: этот размер и выше.