I have seen in many pages that when shrinking the window, even if it is up to 1024px wide, the content of the page shrinks according to the size of the window, I tried with media queries but I did not understand very well how to use it, I am new to css, I leave you the code
gral.css
*{
margin:0px;
padding:0px;
}
body {
/* background-image: url("../rock.jpg");*/
margin: auto;
width: 100%;
}
main {
width:70%;
float:left;
background-color: #fff;
height: auto;
}
aside{
width: 30%;
float:right;
background-color: #fff;
height: auto;
}
.glyphicon {
font-size: 25px;
}
.icon-size
{
font-size: 87px;
}
.container{
float:left;
padding-right: 0px;
padding-left: 0px;
}
/* NavBar gral*/
.navbar {
border-bottom:2px solid #F49D51;
margin-bottom: 0px;
}
/* NavBar login de usuario*/
.navbar-login
{
width: 20%;
padding: 10px;
padding-bottom: 0px;
}
.navbar-login-session
{
padding: 10px;
padding-bottom: 0px;
padding-top: 0px;
}
/* Manejo de Tabs Gral*/
.tabss{
background-color: #444444;
margin: 0px;
padding-top: 5px;
border-bottom-color: #666666;
}
.nav-tabs {
margin-left: 5px;
border: 0px solid transparent;
}
.nav-tabs > li > a,
.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus {
color: #FFF;
}
.nav-tabs > .open > a,
.nav-tabs > .open > a:hover,
.nav-tabs > .open > a:focus,
.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus {
color: #fff;
background-color: #666666;
border-color: transparent;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
color: #fff;
font-weight: bold;
background-color: #666666;
border-color: #444444;
border-bottom-color: transparent;
}
.panel-primary {
border-bottom-color: #fff;
border-left-color: #fff;
border-right-color: #fff;
border-top-color: #666666;
float:left;
width:95.8%;
}
.panel-primary > .panel-heading {
color: #fff;
background-color: #666666;
border-color: #666666;
}
.panel {
border: 0px solid transparent;
}
.panel-heading {
border-top-left-radius: 0px;
border-top-right-radius: 0px;
width: 100%
}
.panel-body {
padding: 15px;
float:left;
}
/* Fin Panel Tabs Gral*/
.top-aside{
float:right;
background-color: #444444;
margin: 0px;
padding-top: 5px;
border-bottom-color: #666666;
border-left-color: black;
box-shadow: 1px 0 0 #3a3a3a inset;
height: 46px;
width:100%;
}
/* Mesas Restaurant */
.table-mesas {
float:left;
width: 95.8%;
}
.table-mesas tr td{
padding:15px;
}
.butt-mesas {
-webkit-border-radius: 4;
-moz-border-radius: 4;
border-radius: 4px;
text-shadow: 1px 1px 15px #666666;
font-family: Arial;
color: #ffffff;
font-size: 30px;
padding: 30px 40px;
background: #88dd77;
border: solid #000000 1px;
text-decoration: none;
width: 100%;
}
.butt-mesas:hover {
background: #9ae288;
text-shadow: 1px 1px 15px #666666;
text-decoration: none;
}
/* Fin Mesas Restaurant */
<html lang="es">
<head>
<title>Trabajo Cuatrimestral OO2</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="../css/bootstrap.css" rel="stylesheet">
<link href="../css/gral.css" rel="stylesheet">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
</script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img src="../logo.jpg" width="150" height="35"></a>
</div>
<ul class="nav navbar-nav">
<li class="active" id="restaurant"><a href="../restaurant/salon.html" title="Restaurant"><span class="glyphicon glyphicon-cutlery"></span></a></li>
<li id="ventas"><a href="#productos/" title="Ventas"><span class="glyphicon glyphicon-shopping-cart"></span></a></li>
<li id="productos"><a href="../productos/productos.html" title="Productos"><span class="glyphicon glyphicon-apple"></span></a></li>
<li id="client"><a href="#productos/" title="Clientes"><span class="glyphicon glyphicon-user"></span></a></li>
<li id="report"><a href="#productos/" title="Reportes"><span class="glyphicon glyphicon-stats"></span></a></li>
<li id="config"><a href="#productos/" title="Configuración"><span class="glyphicon glyphicon-cog"></span></a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-user"></span>
<strong>Nombre</strong>
<span class="glyphicon glyphicon-chevron-down"></span>
</a>
<ul class="dropdown-menu">
<li>
<div class="navbar-login">
<div class="row">
<div class="col-lg-4">
<p class="text-center">
<img src="../foto-carnet.jpg" width="100" height="100">
</p>
</div>
<div class="col-lg-8">
<p class="text-left"><strong>Nombre Apellido</strong></p>
<p class="text-left small">[email protected]</p>
<p class="text-left">
<a href="#" class="btn btn-primary btn-block btn-sm">Actualizar Datos</a>
</p>
</div>
</div>
</div>
</li>
<li class="divider"></li>
<li>
<div class="navbar-login navbar-login-session">
<div class="row">
<div class="col-lg-12">
<p>
<a href="#" class="btn btn-danger btn-block">Cerrar Sesion</a>
</p>
</div>
</div>
</div>
</li>
</ul>
</li>
</ul>
</nav>
<main>
<div class="container">
<div class="tabss">
<ul class="nav nav-tabs">
<li class="active"><a href="../restaurant/salon.html">Salon</a></li>
<li><a href="#">Salon 1</a></li>
</ul>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<span class="panel-title">MESAS</span>
</div>
<div class="panel-body">
<table class="table-mesas">
<tr>
<td><button class="butt-mesas">1</button></td>
<td><button class="butt-mesas">2</button></td>
<td><button class="butt-mesas">3</button></td>
<td><button class="butt-mesas">4</button></td>
<td><button class="butt-mesas">5</button></td>
</tr>
<tr>
<td><button class="butt-mesas">1</button></td>
<td><button class="butt-mesas">2</button></td>
<td><button class="butt-mesas">3</button></td>
<td><button class="butt-mesas">4</button></td>
<td><button class="butt-mesas">5</button></td>
</tr>
<tr>
<td><button class="butt-mesas">1</button></td>
<td><button class="butt-mesas">2</button></td>
<td><button class="butt-mesas">3</button></td>
<td><button class="butt-mesas">4</button></td>
<td><button class="butt-mesas">5</button></td>
</tr>
<tr>
<td><button class="butt-mesas">1</button></td>
<td><button class="butt-mesas">2</button></td>
<td><button class="butt-mesas">3</button></td>
<td><button class="butt-mesas">4</button></td>
<td><button class="butt-mesas">5</button></td>
</tr>
<tr>
<td><button class="butt-mesas">1</button></td>
<td><button class="butt-mesas">2</button></td>
<td><button class="butt-mesas">3</button></td>
<td><button class="butt-mesas">4</button></td>
<td><button class="butt-mesas">5</button></td>
</tr>
</table>
</div>
</div>
</div>
</main>
<aside>
<section class="top-aside">
</section>
</aside>
</body>
</html>
If you want to see the design well, I leave you my bootstrap.css because I changed parts of it without knowing and otherwise the design is not appreciated
bootstrap.css https://mega.nz/#!Fj5GWLBL!4wNXxG65pFD9IOr9rum6UTUCKWrv9eN-TpXt8QDVHSw
bootstrap.css.map https://mega.nz/#!1vZQWCxY!AArlqs4Eyngz0HrXi2AC0gSWphzcPhwIe18E7Hm2ilQ
Thanks, it was exactly what I was looking for, could you explain to me what these css lines do?
display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
It's the only thing I don't understand, I'm going to google it anyway, but if you can explain it better.
Thank you very much!!