Mobile-responsiveness, works on the web, doesn't work on mobile devices

Question

I have a website, girlsjustwannahavefont.com

The website is almost done, but the functionality is questionable on mobile devices. When I click on the 'view my process' button on mobile devices, it doesn't work? But it works fine on the web. Can any HTML, CSS, JavaScript god shed some light as to why that's happening? To clarify, the button doesn't work on Safari or when it was tested on my iPhone.

This is the CSS code for the modal.

.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;
}

And this is the JavaScript code to be executed when that button is clicked.

$('.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

There's an open bracket that is never closed, could be the problem:

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

Try

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

in all the event handlers