Media screen does not work with boostrap 4

Asked

Viewed 61 times

0

<?php
session_start(); // Inicia a sessão
include_once("func/functions.php"); // Chama o arquivo de funções padrão.
include_once("func/f_exames.php"); // Chama o arquivo de funções específicas.
if ($_SESSION['userPermission'] <> 14) // Valida o grau de permissão para mostrar botão de navegação entre motoristas
   $show="hidden";
   
if (is_null($_SESSION['userName'])) // Valida se existe usuário logado
	header('location:./index.php');
	
$codMot = $_SESSION['userCodMot'];
$foto = (isset($_SESSION['userPhoto'])) ? 'fotos/'.$_SESSION['userPhoto'] : 'fotos/YAPONYRA_FOTO.jpg';
?>
<!DOCTYPE html>
 <html>
	<head>
		<meta http-equiv=Content-Type content="text/html; charset=utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title> Exames e Cursos </title>
		<link rel="stylesheet" href="css/bootstrap.min.css">
		<script type="text/javascript"  src="js/jquery.min.js"></script>
		<script type="text/javascript"  src="js/bootstrap.min.js"></script>
		<script type="text/javascript"  src="js/comandos.js"></script>
		<link rel="stylesheet" href="css/exames.css">
		<link rel="stylesheet" href="css/padrao.css">
	</head>
	<body onmousemove="acao();"> <!-- Função acao() faz verificação de ociosidade no painel, após determinado tempo ele fecha. -->
		<div class="container-fluid">
			<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
						<a class="navbar-brand" href="http://www.hitransportes.com.br/" target="_blank">HItransportes | </a>
						<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
						    <span class="navbar-toggler-icon"></span>
						</button>
				<div class="collapse navbar-collapse"id="collapsibleNavbar">
					<ul class="navbar-nav">
						 <li class="nav-item">
						    <a class="nav-link" href="inicio.php"><img src="logo/geral.png" /> Inicio </a>
						  </li>
						  <li class="nav-item <?php echo $show; ?>">
						     <a class="nav-link" href="requisicao.php"><img src="logo/abastecimento.png" /> Abastecimento </a>
						  </li>
						  <li class="nav-item">
						     <a class="nav-link" href="dashboard.php"><img src="logo/relatorio.png" /> Relatórios </a>
							</li>
						  <li class="nav-item">
						    <a class="nav-link" href="perfil.php"><img src="logo/perfil.png" /> Perfil</a>
						  </li>
						  <li class="nav-item">
						    <a class="nav-link" href="#"><img src="logo/outros.png" /> Outros</a>
						  </li>
						  <li class="nav-item">
							 <a class="nav-link" href="exames.php"><img src="logo/exames.png" /> Exames/Cursos</a>
						  </li>
						  <li class="nav-item">
						    <a class="nav-link" href="func/f_parametros.php?func=sair"><img src="logo/sair.png" /> Sair</a>
					    	</li>
					</ul>
				</div>
			</nav>
			<div class="row topo ">
				<div class="col-sm-1 user-foto"><img src="<?php echo $foto ?> "></div>
				<div class="col-sm-2 user-info" style="text-align:left"><label><?php echo $_SESSION['userName']; ?> </label></div>
				<div class="col-sm-3 user-info" style="text-align:center"><label>Nome do Sistema</label></div>
			</div>
		</div>
		<div class="container-fluid">
			<div class="row">
				<div class="col-sm-12">
					<div class="head-docs">
						<h4>Documentos</h4>
					</div>
					<div class="documentos">
						<div class="ex-title">Tipo Documento</div>
						<div class="ex-title">Data Vencto.</div>
						<div class="ex-title">Expira em</div>
						<?php echo cnh($codMot)?>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-12">
					<div class="head-title">
						<h4>Exames</h4>
					</div>
					<div class="grid">
						<div class="ex-title">Lançamento</div>
						<div class="ex-title">Cód.Motorista</div>
						<div class="ex-title">Motorista</div>
						<div class="ex-title">Cód.Curso</div>
						<div class="ex-title">Exames</div>
						<div class="ex-title">OBS</div>
						<div class="ex-title">Vencto.Curso</div>
						<div class="ex-title">Expira em</div>
						<?php echo exames($codMot) ?>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-12">
					<div class="head-title">
						<h4>Direção Defensiva</h4>
					</div>
					<div class="grid">
					<div class="ex-title">Lançamento</div>
						<div class="ex-title">Cód.Motorista</div>
						<div class="ex-title">Motorista</div>
						<div class="ex-title">Cód.Curso</div>
						<div class="ex-title">Cursos</div>
						<div class="ex-title">OBS</div>
						<div class="ex-title">Vencto.Curso</div>
						<div class="ex-title">Expira em</div>
						<?php echo dirDef($codMot) ?>
					</div>	
				</div>
			</div>
			<div class="row">
				<div class="col-sm-12">
					<div class="head-title">
						<h4>Treinamentos</h4>
					</div>
					<div class="treinamento">
					<div class="grid">
						<div class="ex-title">Lançamento</div>
						<div class="ex-title">Cód.Motorista</div>
						<div class="ex-title">Motorista</div>
						<div class="ex-title">Cód.Curso</div>
						<div class="ex-title">Cursos</div>
						<div class="ex-title">OBS</div>
						<div class="ex-title">Vencto.Curso</div>
						<div class="ex-title">Expira em</div>
						<?php echo treinamento($codMot) ?>
					</div>
				</div>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-12">
					<div class="head-title">
						<h4>Mopp</h4>
					</div>
					<div class="mop">
						<div class="grid">
							<div class="ex-title">Lançamento</div>
							<div class="ex-title">Cód.Motorista</div>
							<div class="ex-title">Motorista</div>
							<div class="ex-title">Cód.Curso</div>
							<div class="ex-title">Cursos</div>
							<div class="ex-title">OBS</div>
							<div class="ex-title">Vencto.Curso</div>
							<div class="ex-title">Expira em</div>
							<?php echo mop($codMot) ?>
						</div>
					</div>
				</div>
			</div>
			<div class="leg1">
							
			</div>
			<div class="text-leg1">
				Vencimento a partir de  90 dias
			</div>
			<div class="leg2">			
			</div>
			<div class="text-leg2">
				Vencimento a partir de 60 dias
			</div>
			<div class="leg3">			
			</div>
			<div class="text-leg3">
				Vencimento a partir de 30 dias
			</div>
			<div class="row">
				<div class="col-sm-12">
				</div>
			</div>
		</div>
	</body>
</html>

In my project, I want to change some sizes and spacing in the menu, I’m using Bootstrap4, and another CSS file,in this file, I changed some things and it worked, but when I went to add a @media screen, it just doesn’t work.... Can anyone tell me why ? NOTE: Only @media that doesn’t work, the rest is beautiful.


body
{
  color: #000;
}
.topo
{
    margin-top: 1%;
}
nav li
{
    padding-left: 5px;
    padding-right:5px;
}
div .list-group a
{
  color: #000;
}
.user-foto
{
    margin-bottom: 1%;
    width: 70px;
}
.user-foto img
{
    width: 72px;
    height:72px;
    margin-bottom: 2%;
    border-radius: 100%;
}
.user-info
{
    margin-left: 1%;
    margin-top: 1%;
}
.user-info label
{
    font-size: 140%;
}
.card
{
    margin-top: 1%;
}
@media only screen and(min-width: 880px) and(max-width: 1204px){

    nav li
    {
        padding-left: 1px;
        padding-right:1px;
    }
}
  • I believe you’re implementing it the wrong way. Check here the media query manual in W3school.

  • CSS-only tiagão does not answer you right, put HTML as well, including with the <head>. But what I can tell you is that your @media is outside the official standard of Bootstrap measures. Qq way you can also try putting !important in styles...

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.