I clarify before that I am new to this, I have an ASP.NET project to which I add my stylesheet, on that page I try to include a half querie but it seems that it does not work.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - Nebulosa</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body class="fondo-gris">
<nav class="navbar navbar-inverse navbar-fixed-top menu_gral " role="navigation" style="box-shadow:10px 5px 15px; ">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
@Html.ActionLink("Nebulosa", "Principal", "Menu", new { area = "" }, new { @class = "navbar-brand" })
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav ">
<li class="dropdown icono">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-th glypStyle" ></i>Flujo Caja<b class="caret"></b></a>
<ul class="dropdown-menu dropDownEstilo">
<li><a>@Html.ActionLink("Flujo de Caja Diario", "Index", "FlujosCaja")</a></li>
<li>@Html.ActionLink("Borrar Flujo de Caja", "IndexBorrar", "FlujosCaja")</li>
</ul>
</li>
<li class="dropdown icono">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-wrench glypStyle" ></i>Mantenimiento<b class="caret"></b></a>
<ul class="dropdown-menu dropDownEstilo">
<li>@Html.ActionLink("Colaborador", "Index", "Colaboradores")</li>
<li>@Html.ActionLink("Movimiento", "Index", "Movimientos")</li>
<li>@Html.ActionLink("Proveedor", "Index", "Proveedores")</li>
<li>@Html.ActionLink("Usuario", "Index", "Usuarios")</li>
@*<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Producto<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>@Html.ActionLink("Tipos de Producto", "Index", "TiposProducto")</li>
<li>@Html.ActionLink("Categorias de Tipo de Producto", "Index", "CategoriasTipoProducto")</li>
<li>@Html.ActionLink("Productos", "Index", "Productos")</li>
</ul>
</li>*@
</ul>
</li>
<li class="dropdown icono">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="glyphicon glyphicon-list-alt glypStyle" ></i>Reportes<b class="caret"></b>
</a>
<ul class="dropdown-menu dropDownEstilo">
<li>@Html.ActionLink("Flujo de Caja", "Index", "ReporteFlujosCaja")</li>
<li>@Html.ActionLink("Utilidad por Rango de Fecha", "Index", "ReporteUtilidadRangoFecha")</li>
</ul>
</li>
</ul>
@Html.Partial("_LoginPartial")
</div>
</div>
</nav>
<div class="container-fluid body-content" style="padding: 45px 25px 0px 25px" ;>
@RenderBody()
<hr />
<footer>
<p align="right">© @DateTime.Now.Year - Nebulosa</p>
</footer>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
<script src="~/Scripts/Programacion/Menu.js"></script>
<link href="~/Content/Menu.css" rel="stylesheet" />
@RenderSection("scripts", required: false)
</body>
</html>
And this is the css
.table-style {
border-radius: 10px;
padding: 10px;
box-shadow: 3px 3px 8px;
margin-top: 100px;
background-color: white;
}
.tableTitle thead{
color:black;
font-weight:700;
text-decoration:underline;
}
.graficoVentas {
margin-top: 10px
}
.fondo-gris {
background-color: #EEEEEE;
padding: 50px 25px 0px 25px;
}
@media only screen and (max-width: 900px) and (max-height: 768px) {
.fondo-gris {
background-color: red;
}
}
.icono {
/*display: flex !important;*/
align-items: center;
justify-content:center;
}
.icono a{
padding-left:8px !important;
}
.dropDownEstilo {
background-color:#333;
border-radius:10px !important;
}
.dropDownEstilo a {
color:white !important;
}
.menu_gral li a:hover,
menu_gral li a:focus {
background: #444;
color: #fff;
border-radius: 50px !important;
}
.glypStyle {
color: white;
margin-right: 10px;
}