I'm making a small system in HTML5 , CSS3 , JS , PHP and BOOTSTRAP , which I want the text to scale to the size of the screen.
I understand that BOOTSTRAP makes the site become responsive , but when it comes to scaling the titles overflow.
Image of the problem
I would like to know what I have to do so that the text or the elements do not overflow me_
html,body{
width: 100%;
height: 100%;
margin-right: 0;
margin-left: 0;
padding: 0;
}
.bgLogin{
background-color: #E4E2E2;
}
.fullWidth{
height: 100%;
}
#formLogin{
width: 50%;
height: 50%;
}
.textVerde{
color: #006847;
}
.textRojo{
color: #CE1126;
}
.header{
background-color: #F1F0EB;
height: 15%;
}
.footer{
background-color: #776D5A;
height: 10%;
position: absolute;
bottom: 0;
}
.tablero{
height: 70%;
}
.asideTablero{
background-color: #AAFAC8;
}
.maxWidthHeigth{
min-width: 10%;
min-height: 10%;
max-width: 100%;
max-height:100%;
}
header h1{
font-size:1.5em;
}
header h4{
font-size:1.2em;
}<!DOCTYPE html>
<html lang="ES-MX">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tablero Administrador</title>
<!--CSS Bootstrap-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<!--CSS FontAwesome-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/solid.css" integrity="sha384-v2Tw72dyUXeU3y4aM2Y0tBJQkGfplr39mxZqlTBDUZAb9BGoC40+rdFCG0m10lXk" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/fontawesome.css">
<!--CSS Local-->
<link rel="stylesheet" type="text/css" href="../../../CSS/sce2018.css">
<!--Script Jquery-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<header class="card-header container-fluid header maxWidthHeigth"">
<div class="row justify-content-center maxWidthHeigth">
<h1 class="maxWidthHeigth">Bienvenido(a) <small class="textRojo">FERNANDO CORTEZ RODRÍGUEZ</small> al <strong class="textVerde">SCE 2018</strong></h1>
</div>
<div class="row justify-content-center maxWidthHeigth" style="height: 30%">
<h4 class="maxWidthHeigth">Has ingresado con el usuario <strong>FERCOR</strong></h4>
</div>
</header>
<nav id='navTablero' class="nav navbar navbar-dark navbar-expand bg-dark justify-content-end" style="height: 5%;">
<a href="../../../control/login/logout.php" class="navbar-brand">
<span style="margin:0"><i class="fas fa-sign-out"></i> Salir</span>
</a>
</nav>
<section id='tableroAdmin' class="container-fluid tablero maxWidthHeigth">
<div class="row fullWidth">
<aside class="col-2 fullWidth asideTablero maxWidthHeigth">
</aside>
</div>
</section>
<footer class="card-footer container-fluid footer maxWidthHeigth">
<div class="row justify-content-center align-items-center">
<p class="text-white"><strong>2018</strong></p>
</div>
<div class="row">
<small></small>
</div>
</footer>
</body>
</html>