Problem with CSS media queries

Question

I’m trying to make my application run on smartphones, beyond the desktop standard. But I can’t get the media queries to work properly.

It’s only working until the size of the tablet screen. When I minimize the screen to the size of the smartphone doesn’t work.

My code:

/*dataTable*/

td.highlight {
    background-color: whitesmoke !important;
}
/*Responsivo nos seguintes dispositivos: google chrome, tablets (paisagem e retrato), smartphone*/

@media only screen and (max-width: 1920px), (max-width: 1080px), (max-width: 100em){
    body {
        background-color: #b3b3e6;
    }
    /* ========================= PAGINA DE GERAR DSS ================================== */
    #form_excel {
        padding: 10px;
    }
    #title_scroll_box {
        display: block;
    }
    .container {
        scroll-snap-type: y mandatory;
        /*faz com que os elementos fiquem dentro do scroll, independente se a lista
                              adiciona ou remove elementos. Os elementos carregados e mostrados a medida
                              que a barra de rolagem desce  */
    }
    .nabvar {
        background-color: #000080;
        color: white;
        margin-bottom: 1.5em;
        font-weight: bold;
        font-size: 20pt;
    }
    @font-face {
        font-family: Drops;
        src: url('../fonts/Drops.ttf');
    }
    .title_gerador_dss {
        font-family: Drops;
        font-size: 30pt;
    }
    #excel_file {
        width: 40em;
        padding: 2em;
        border-radius: 13px;
        background-color: white;
        margin-bottom: 5em;
        padding-bottom: 4em;
    }
    .data_form {
        display: inline-block;
    }
    #options {
        margin-bottom: 30em;
        color: black;
        background-color: black;
    }
    #gerar_dss {
        display: inline-block;
        margin-top: 3em;
        margin-left: 15em;
        margin-right: 1em;
    }
    .btn_bold {
        font-family: sans-serif;
        font-weight: bold;
    }
    #loading_icon {
        visibility: hidden;
    }
    /* ============================= PAGINA DE HISTORICO ========================= */
    #historico {
        width: 40em;
        height: 9em;
        padding: 2em;
        border-radius: 13px;
        background-color: white;
        margin-bottom: 5em;
        text-align: center;
    }
    #historico-table {
        border-style: hidden;
    }
    caption {
        font-weight: bold;
        font-size: 20pt;
        font-family: serif;
    }
    .margin_btn_history {
        margin-right: 0.5em;
    }
    /* ======================== MENSAGENS DE ERRO E SUCESSO ================================ */
    #msg_error {
        font-family: monospace;
        font-weight: bold;
        font-size: 15pt;
    }
    #process-success {
        height: 6em;
        font-family: monospace;
        font-weight: bold;
        font-size: 15pt;
        height: 3.3em;
        background-color: #32CD32;
    }
    .material-icons {
        color: white;
        font-weight: bold;
    }
    .bold {
        color: black;
        font-size: 16pt;
        font-family: fantasy;
    }
    .toast-success {
        background: green;
    }
    .toast-error {
        background: red;
    }
    .div-scroll {
        overflow: scroll;
        height: 380px;
        width: 380px;
        position: relative;
    }
    .message {
        width: 100%;
        border: 1px solid;
        padding: 10px;
        font-size: 13pt;
        border-radius: 5px;
    }
    .message-error {
        border-color: #d32f2f;
        background-color: #ef5350;
        color: white;
    }
    .message-success {
        border-color: #32CD32;
        background-color: #00FF00;
        color: white;
    }
    #messages-form {
        display: none;
    }
    #process-error {
        display: none;
    }
    #process-success {
        display: none;
    }
    #process-loading {
        display: none;
    }
    .center {
        text-align: center;
    }
    /*Regra para a animacao*/
    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
    /*Classe que mostra a animacao 'spin'*/
    .loader {
        border: 16px solid #f3f3f3;
        border-radius: 50%;
        border-top: 16px solid #3498db;
        width: 50px;
        height: 50px;
        -webkit-animation: spin 2s linear infinite;
        animation: spin 2s linear infinite;
    }
}

@media only screen and (max-width: 480px) {
    #aplicacao {
        max-width: 10em;
    }
}

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Alerta DSS</title>
    <link rel="stylesheet" href="resources/css/style.css" media="screen">
    <link rel="stylesheet" href="resources/css/materialize.min.css">
    <link rel="stylesheet" href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<body>
<!-- GERARDOR DE ARQUIVO EXCEL (DADOS DE DSS) -->
    <div id="aplicacao" class="container">
        <div class="container" id="excel_file">
            <!--MENSAGENS DE ERRO DO FORMULÁRIO-->
            <div class="message message-error" id="messages-form">
                <a class="right" href="#"><i id="close-message-form" class="material-icons">close</i></a>
                <ul class="list-error" id="error-msg"></ul>
            </div>
            <!--MENSAGEM DE SUCESSO DA GERAÇÃO DE DSS-->
            <div class="message message-error" id="process-error">
                <a class="right" href="#"><i id="close-message-error" class="material-icons">close</i></a>
                <span><h5>Não foi possível gerar o arquivo DSS.</h5></span>
            </div>
            <!--MENSAGENS DE ERRO DA GERAÇÃO DE DSS-->
            <div class="message message-success " id="process-success">
                <a class="right" href="#"><i id="close-message-success" class="material-icons">close</i></a>
                <span><h5>DSS gerado com sucesso.</h5></span>
            </div>
            <form id="form_excel">

                <!-- FORMULARIO PARA ESPECIFICAR OS DADOS QUE DEVERA CONSTAR NO ARQUIVO EXCEL GERADO -->

                <p>
                    <label class="bold" for="inicio">Data Inicial </label>
                    <input type="date" id="inicio" required>
                </p>
                <p>
                    <label class="bold" for="fim">Data Final </label>
                    <input type="date" id="fim" required>
                </p>
                <p>
                    <label class="bold" for="nome_arquivo">Nome para o Arquivo (Sem a extensão .dss): </label>
                    <input type="text" id="nome_arquivo" required placeholder="Será o nome do arquivo .dss a ser gerado">
                </p>
                <p>
                    <label class="bold" for="observacao">Observação </label> - Opcional
                    <input type="text" id="observacao" placeholder="Será o nome do arquivo .dss a ser gerado">
                </p>

                <p> <label class="bold data_form" for="tipo">Tipo de Dado </label>
                    <select id="tipo" required>
                                <option value="" disabled selected>Escolha um tipo</option>
                                <option value="HORARIO">HORÁRIO</option>
                                <option value="DIARIO">DIÁRIO</option>
                                <option value="MEDIAS_PCD">MÉDIAS PCD</option>
                                <option value="CHUVA_ACUMULADA">CHUVA ACUMULADA</option>
                            </select>
                </p>

                <p id="title_tipos_dados"> <label class="bold">Selecione o(s) tipos de dados que deseja gerar:</label></p>

                <p>
                    <label>
                                <input type="checkbox" id="chuva" class="filled-in" value="dss_chuva"/>
                                <span>CHUVA</span>
                            </label>
                </p>

                <p>
                    <label>
                                <input type="checkbox" id="cota" class="filled-in" value="dss_cota"/>
                                <span>COTA</span>
                            </label>
                </p>

                <p>
                    <label>
                                <input type="checkbox" id="vazao" class="filled-in" value="dss_vazao"/>
                                <span>VAZÃO</span>
                            </label>
                </p>

            </form>

            <!-- LISTA SCROLL COM AS OPCOES DE ESTACAO -->
            <form>
                <p class="bold">Selecione a estação desejada:</p>
                <section class="container div-scroll">
                    <section id="estacoes_sace">
                    </section>
                    <section id="estacoes_hidro">
                    </section>
                </section>
                <div class="center" id="process-loading">
                    <br>
                    <div class="preloader-wrapper small active">
                        <div class="spinner-layer spinner-blue-only">
                            <div class="circle-clipper left">
                                <div class="circle"></div>
                            </div>
                            <div class="gap-patch">
                                <div class="circle"></div>
                            </div>
                            <div class="circle-clipper right">
                                <div class="circle"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <a href="#" id="gerar_dss" class="btn btn_bold">Gerar Dados</a>
            </form>
        </div>
    </div>
</body>
</html>

What I’m doing wrong?

Answer 1

Your @media is very confused, I don’t know if this answer will solve the problem fully, but I hope I help you and understand how you will set up your rules of media querie

Notice that this

@media only screen and (max-width: 1920px), (max-width: 1080px), (max-width: 100em) {}

It means to apply the CSS if the screen is, largura máxima de 1080px, largura máxima de 1920px, largura máxima de 100em (1 in is usually 16px, then 100em = 1600px). Soon after 1080px which is the smallest size it already applies the CSS, the other size are redundant as they will already inherit the styles anyway....

Another thing is that the smallest media queri that is @media only screen and (max-width: 480px) { } you put last... This is wrong, the smallest size of max-width should always come first, not to be overwritten by @media that comes later. I recommend you read this answer Use @media, @media screen and or @media only screen and Have some difference?

I can’t say, but if you were thinking about Mobile First I believe that by the way you did maybe in place of max-width you wanted to put min-width, Even so what I said about redundancy is valid, to "achieve" the first value what comes after is redundant and does not make sense. I recommend you read this other answer to help you understand the concept of @medias min-width and Mobile First Media Queries Does Not Work Informed Measures

Another observation,

Notice that this @media, see that I have two values with a and (max-width: 900px) and (min-width: 600px) and a separation with a , (min-width: 1100px)

@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) { }

It means that when the width is amid 600px and 900px OR above 1100px CSS is applied. Then between 0px and 600px and between 900px and 1100px the styles of this @media will not be applied. At minimum width of 1100px the style is applied!

Answer 2

"- Someone would know to point out what I’m doing wrong?"

I will not analyze and/or reproduce your code completely. My answer will be limited to this part:

@media only screen and (max-width: 1920px), (max-width: 1080px), (max-width: 100em){

First point: only screen means that the rules will be applied only to screens. That is, they will not be applied to a print, for example;

According to: (max-width: 1920px), (max-width: 1080px), (max-width: 100em)

Although the browser interprets "this way", it will consider all these rules. But look at it this way: it is not logical to limit the 1920px OR 1080px OR 100em. In practice, the largest prevails, since all are about the max-width.

Third: all the styling of your page will only be applied "if the rules of the media query are met". Ideal is for you to style the pattern for EVERYTHING and then make the media query containing only what changes to such a rule.

---

A straw (example) very superficial on the media queries (resize your screen to test):

div.exemplo {
    width: 50px;
    height: 50px;
}
@media (min-width: 100px) and (max-width: 200px){
    div.exemplo {
        background-color: red;
    }
}
@media (min-width: 200px) and (max-width: 300px){
    div.exemplo {
        background-color: blue;
        width: 100px;
    }
}
@media (min-width: 300px) and (max-width: 400px){
    div.exemplo {
        background-color: yellow;
        height: 100px;
    }
}
@media (max-width: 600px){
    /*
     * DEFINI APENAS O MÁXIMO
     * ESSA REGRA SERÁ APLICADA EM CONJUNTO ÀS DEMAIS
     * DESDE QUE O LIMITE MÁXIMO DA LARGURA DA
     * VIEWPORT SEJA 600px
     */
    div.exemplo {
        border: solid 3px green;
    }
}
@media (min-width: 350px){
    /*
     * DEFINI APENAS O MÍNIMO
     * ESSA REGRA SERÁ APLICADA EM CONJUNTO ÀS DEMAIS
     * DESDE QUE O LIMITE MÍNIMO DA LARGURA DA
     * VIEWPORT SEJA 350px
     *
     * REPARE QUE ELA ESTÁ "DEPOIS" DA REGRA DE 600PX
     * ISSO SIGNIFICA QUE ELA VAI SOBRESCREVÊ-LA
     */
    div.exemplo {
        border: dotted 3px blue;
    }
}

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta
            name="viewport"
            content=
                "width=device-width,
                user-scalable=yes,
                initial-scale=1.0,
                maximum-scale=10, minimum-scale=1.0">
    </head>
    <body>
        <div class="exemplo"></div>
    </body>
</html>