Мобильная адаптивность, работает в Интернете, не работает на мобильных устройствах

Question

У меня есть веб-сайт, girlsjustwannahavefont.com

Веб-сайт почти готов, но его функциональность сомнительна на мобильных устройствах.Когда я нажимаю кнопку «Просмотреть мой процесс» на мобильных устройствах, это не работает?Но он отлично работает в Интернете.Может ли какой-нибудь бог HTML, CSS, JavaScript пролить свет на то, почему это происходит? Чтобы уточнить, кнопка не работает в Safari или когда она была протестирована на моем iPhone.

Это код CSS для модального типа.

.modal {
  background-color: $yellow;
  z-index: 300;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  padding: 20px 0px 100px 100px;
  color: $black;
  display: none;
}

И это код JavaScript, который будет выполняться при нажатии этой кнопки.

$('.link').click(function() {
  m.id = $(this).attr('data-id');
  $('body').css('overflow', 'hidden');
  $("div[data-id=" + m.id).slideDown();
});
$('.close').click(function() {
  $("div[data-id=" + m.id).slideUp();
  $('body').css('overflow', 'auto');
})

Answer 1

Существует открытая скобка, которая никогда не закрывается, может быть проблема:

("div[data-id=" + m.id)

Попробуйте

("div[data-id=" + m.id + "]")

во всех обработчиках событий