If your media queries are not being read by Safari, consider using this alternative syntax:
@media screen and (max-device-width:640px), screen and (max-width:640px) {
/* styles here */
}
Remember that some classes may not work as expected in Safari. To fix this, add the following lines to your media query:
@media (max-width: 775px) and (min-width: 500px) {
.item-wrap {
display:none;
}
}
These lines will hide the desktop menu properly (setting visible:hidden does not work).
Additionally, ensure that you are loading jQuery before Bootstrap in your head tag. Here's a corrected code snippet:
<head>
<title>Third Wave Analytics</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<link rel="icon" href="../../favicon.ico">
<link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Bree+Serif" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Roboto:400,400italic,300italic" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Raleway" rel="stylesheet" type="text/css">
<script>
function scroll(){
$('.btnMedio').click(function(event) {
event.preventDefault();
var n = $('#myCarousel').height() + 20;
$('html, body').animate({ scrollTop: n }, 900);
});
};
$(document).ready(scroll);
</script>
</head>