When testing the responsive, the navbar and carousel are turned on. What I'm looking for is to try to make the carousel start below the navbar since when trying tablet mode that happens.
body {
font-family: 'Roboto',sans-serif;
font-size: 18px;
}
/* PORTADA */
.portada {
background-color: black;
}
.carousel-item {
height: 65vh;
min-height: 300px;
background: no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.carousel-caption {
bottom: 100px;
}
.portada .title {
font-weight: bold;
}
.portada .fondo {
background: rgba(0, 0, 0, 0.2);
}<!doctype html>
<html lang="es">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<!-- Direcciones Personales -->
<link rel="stylesheet" href="files/css/main.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<title>MADIWEB</title>
</head>
<body>
<!-- MENU PRINCIPAL-->
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
<!-- BARRA CONTACTO -->
<span class="navbar-text">
Navbar text with an inline element
</span>
</div>
</nav>
<!-- PORTADA -->
<header class="portada">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active" style="background-image: url('https://td2branding.com/wp-content/uploads/2018/08/Fondo-Amco-1920-x-800-1.jpg')">
<div class="carousel-caption d-none d-md-block">
<div class="container-fluid">
<div class="row">
<div class="col-md-5 shadow p-3 mb-5 rounded fondo">
<h1 class="display-4 title mb-4">DISEÑO WEB A MEDIDA</h1>
<h4 class="text">
Somos diseñadores de web, analizamos cada proyecto y presentamos la mejor opción para cada necesidad, brindando sitios funcionales de calidad.
</h4>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item" style="background-image: url('https://td2branding.com/wp-content/uploads/2018/08/Fondo-Amco-1920-x-800-1.jpg')">
<div class="carousel-caption d-none d-md-block">
<div class="col-sm-5 shadow p-3 mb-5 rounded fondo">
<h1 class="display-4 title mb-4">MARKETING DIGITAL</h1>
<h4 class="text">
Desarrollamos y brindamos planes de Marketing estratégicos, gestión de contenidos en redes sociales y campañas publicitarias en medios digitales.
</h4>
</div>
</div>
</div>
<div class="carousel-item" style="background-image: url('https://td2branding.com/wp-content/uploads/2018/08/Fondo-Amco-1920-x-800-1.jpg')">
<div class="carousel-caption d-none d-md-block">
<div class="col-sm-5 shadow p-3 mb-5 rounded fondo">
<h1 class="display-4 title mb-4">CONTACTENOS</h1>
<h4 class="text">
Estamos para asesorarlo. Respondemos sus dudas en minutos.
<br>
<br>
Solicite presentación ahora.
</h4>
<button type="button" class="btn btn-primary my-4" data-toggle="button" aria-pressed="false" autocomplete="off">Presentación.</button>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>