Es un ejercicio para clase, el caso es que aparentemente está todo bien, el responsive no funciona, uso Bootstrap 4. Como tengo la web en servidor local (Xampp), puedo ver la web desde el móvil, pero se ve igual que en el PC, no está funcionando el responsive, os dejo el código.
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="css/style.min.css" rel="stylesheet">
<link href="css/index.css" rel="stylesheet">
</head>
<body class="app header-fixed sidebar-fixed aside-menu-fixed aside-menu-
hidden">
<header class="app-header navbar">
<div class="w-100 cabecera">
<img class="logo" src="./img/kawasaki-logo.png" height="35px;">
</div>
<div class="w-100 bar">
</div>
</header>
<div class="container">
<div class="col-12 marco">
<h2 class="title">Lorem ipsum dolor sit amet.</h2>
<p class="subtitle">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae
quam dolores distinctio molestias dolore in similique a
spernatur, voluptatibus consequuntur ipsum vero doloremque qui
aliquam ut laboriosam adipisci sit tempore vitae tenetur facere
perspiciatis voluptates molestiae.
</p>
<div class="row">
<div class="col-3">
<label class="switch switch-default switch-pill switch-
secondary-outline">
<input type="checkbox" class="switch-input" checked="">
<span class="switch-label"></span>
<span class="switch-handle"></span>
</label>
</div>
<div class="col-7">
<h2 class="title">Lorem ipsum dolor sit amet.</h2>
<p class="subtitle">
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Beatae quam dolores distinctio molestias dolore in
similique aspernatur, voluptatibus consequuntur ipsum
vero doloremque qui aliquam
</p>
</div>
</div>
<div class="row">
<div class="col-3">
<label class="switch switch-default switch-pill switch-
secondary-outline">
<input type="checkbox" class="switch-input" checked="">
<span class="switch-label"></span>
<span class="switch-handle"></span>
</label>
</div>
<div class="col-7">
<h2 class="title">Lorem ipsum dolor sit amet.</h2>
<p class="subtitle">
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Beatae quam dolores distinctio molestias dolore in
similique aspernatur, voluptatibus consequuntur ipsum
vero doloremque qui aliquam
</p>
</div>
</div>
<div class="row">
<div class="col-3">
<label class="switch switch-default switch-pill switch-
secondary-outline">
<input type="checkbox" class="switch-input" checked="">
<span class="switch-label"></span>
<span class="switch-handle"></span>
</label>
</div>
<div class="col-7">
<h2 class="title">Lorem ipsum dolor sit amet.</h2>
<p class="subtitle">
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Beatae quam dolores distinctio molestias dolore in
similique aspernatur,
voluptatibus consequuntur ipsum vero doloremque qui
aliquam
</p>
</div>
</div>
<div class="row final">
<div class="col-9"></div>
<div class="col-3">
<button type="button" class="btn btn-
success">Success</button>
</div>
</div>
</div>
</div>
<footer>
<div class="row">
<div class="col-3"></div>
<div class="col-3 f1">
Siguenos
</div>
<div class="col-3"></div>
<div class="col-3"></div>
</div>
<div class="row">
<div class="col-3"></div>
<div class="col-6 social">
<img src="./img/faceb.png" alt="">
<img src="./img/twitt.png" alt="">
<img src="./img/insta.png" alt="">
</div>
<div class="col-3"></div>
</div>
</footer>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Index.css
.cabecera{
background-color: black;
}
.bar{
background-image: url(../img/header-bg.gif);
height: 20px;
}
.navbar{
padding: 0;
}
body{
background-image: url(../img/kawa.jpg);
background-size:cover;
}
.marco{
background-color: rgba(0, 0, 0, 0.5);
text-align: center;
border-radius: 20px;
padding: 30px;
}
.title{
text-align: justify;
color: #f1f490;
}
.subtitle{
color: white;
text-align: left;
}
.logo{
margin-top: 20px;
margin-left: 50px;
}
.f1{
color: white;
padding-bottom: 20px;
text-align: left;
}
footer{
padding-top: 40px;
padding-bottom: 40px;
}
.social{
text-align: center;
}
.container{
margin-top: 150px;
}
Solución
me faltaba poner este meta:
<meta name="viewport" content="width=device-width, initial-scale=1">