Issue with CSS media queries
I'm trying to make my application run on smartphones , in addition to the default desktop. But I can't get the media queries to work properly.
Is only working up to the size of the tablet screen. When I minimize the screen to the size of the smartphone does not 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 am I doing wrong?
2 answers
Your @media is pretty confusing, I don't know if this answer will solve the problem entirely, but I hope I help you and understand how you will assemble your rules media querie
Notice that this
@media only screen and (max-width: 1920px), (max-width: 1080px), (max-width: 100em) {}
Means it is to apply CSS if the screen is, largura máxima de 1080px, largura máxima de 1920px, largura máxima de 100em (1 in normally is 16px, so 100em = 1600px) . Soon from 1080px which is the smallest size it already applies the CSS, the other size are redundant as they will already inherit the styles of any way....
Another thing is that the lowest mean I wanted that is the @media only screen and (max-width: 480px) { } vc put last... This is wrong, the smallest size of max-width should always come first, so as not to be overwritten by the @media that comes next. I recommend you read this answer Use @media, @Media screen and or @media only screen and does it have any difference?
I can not affirm, but if you were thinking of 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 worth, when "reaching" the first value what comes next is redundant and does not make sense. I recommend that 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 remark,
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) { }
Means that when the width is between 600px e 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 the minimum width of 1100px the style is applied!
"- would anyone know how to point out what I'm doing wrong?"
I will not parse 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 on screens. That is, they will not be applied in a print, for example;
Second: (max-width: 1920px), (max-width: 1080px), (max-width: 100em)
Although the browser interprets "this way", it will consider all these rules. But look from this side: there is no logic to limit 1920px or 1080px or 100em. In practice, the largest prevails, since they are all max-width.
Third: all stylization of your page will only be applied "if the media query rules are met". Ideally you style the pattern for everything and then do the media query containing only what changes to such a Rule .
A very shallow straw (example) 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>