Mobile Site on Safari vs. Chrome

Could it be something to do with the line

@media screen and (max-width: 1024px)

?

How would I fix that?

Here is my custom CSS:

.grecaptcha-badge {
display: none;
}#site-branding {
display: block;
text-align: center;
width: 100%;
}

#site-header {
width: 100%;
}

.site-title { font-size: 42px; }
.site-description { font-size: 18px; }

@media screen and (max-width: 1024px) {
.site-title { font-size: 24px; }
.site-description { font-size: 14px; }
}

.menu.catchresponsive-nav-menu, #menu-main {
float: none;
text-align: center;
width: 100%;
}

.catchresponsive-nav-menu li { float: none; }

/* Slider Dot Color */
#feature-slider .cycle-pager span { color: #ffffff; }
/* Slider Dot Active Color */
#feature-slider .cycle-pager span.cycle-pager-active { color: #D7BC95; }

#feature-slider { padding-bottom: 0px; }

.site-content article {
-webkit-hyphens: none;
-moz-hyphens: none;
hyphens: none;
}

.hentry {
-webkit-hyphens: manual;
-moz-hyphens: manual;
hyphens: manual;
}

#content a:hover {
text-decoration: none;
}

a:hover {
text-decoration: none;
}

a:hover {
color: #BB7711;
}

a:focus,
a:active,
a:hover {
text-decoration: none;
}

#content a:focus,
a:active,
a:hover {
text-decoration: none;
}