Preguntas similares se han hecho aquí anteriormente, pero después de leerlas todavía no he encontrado una respuesta que funcione con mi sitio.

Construí el sitio alrededor de Bootstrap pero agregué algunas de mis propias consultas de medios. El sitio de prueba en vivo está en:http://agoodman.com.au

Las secciones que cambian las consultas de los medios son "nuestras tarifas" y la superposición de "mapa". Si está usando una computadora portátil, cambiar el tamaño del navegador hace que estas secciones se muestren como bloques.

Mis enlaces de hojas de estilo:

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/user.css" rel="stylesheet">

"User.css" es solo un archivo separado porque quería poder mantener y actualizar el marco principal de bootstrap según sea necesario. User.css anula los estilos en bootstrap. Mis consultas de medios en user.css son las siguientes:

@media screen or handheld(max-width: 979px) {
    .fee-buttons {
        height: auto;
        font-weight: 600;
        position: relative;
        padding: 0;
        margin: 0;
        list-style: none;
        }

    .fee-buttons .transformation {
        width: 100% !important;
        height: 300px;
        position: relative;
        z-index: 10;
        left:0;
        }

    .fee-buttons .hourly, .fee-buttons .membership {
    float: none;
    width: 100% !important;
    }

    li.button{
    overflow:visible;
    }

}

@media screen or handheld(max-width: 995px) {
    #overlay {
        position: relative;
        display: block;
        width: auto;
        right: 0;
        padding:1em;
    }
}

Como dije, en los navegadores de escritorio esto funciona bien, pero en los navegadores móviles no funciona en absoluto. He probado tanto en un iPhone 4 (usando un safari) como en un HTC Desire (usando el navegador Android) y ambos se muestran de la misma manera: ignorando la consulta de medios y mostrando el sitio web completo con un montón de contenido realmente aplastante y poco halagador. .

¿Alguna idea sobre lo que estoy haciendo mal aquí?

EDITAR:

Aquí hay capturas de pantalla de lo que esDEBERÍA Parece un ancho de pantalla pequeño:

Y cómo se ve actualmente en Android y iPhone, donde el dispositivo está ignorando mis consultas de medios: