I am coding a website as part of a project. I have written code to make it responsive, using both media queries and bootstrap classes, and everything seems to work when I re-size my screen by dragging it from the corner. However, when I resize the page via the inspect element method, my screen just gets smaller and no responsiveness is shown.
This is my home screen after no re-sizing: enter image description here
Home screen after re-sizing by dragging the screen across: enter image description here
Home screen after inspect element resizing: enter image description here
this is my code for my home page:
`
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" type="text/css" href = "C:\Users\Lenovo User\Documents\uwe_code\Webdev_coursework\styles.css"/>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
</head>
<body>
<!--nav bar-->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#HTNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="home.html">Horizon Travels</a>
</div>
<div class="collapse navbar-collapse" id="HTNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="home.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="register.html"><span class="glyphicon glyphicon-user"></span> Register</a></li>
<li><a href="login.html"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><img src="C:\Users\Lenovo User\Documents\uwe_code\Webdev_coursework\Images\logo.jpg" alt="logo" style="width:40px;"></li>
</ul>
</div>
</div>
</nav>
<br><br><br><br>
<!--travel options-->
<div class="homeBox container-fluid">
<br><br>
<a href="planeBookings.html">View Plane Bookings</a>
</div>
<div class="homeBox container-fluid">
<br><br>
<a href="trainBookings.html">View Train Bookings</a>
</div>
<div class="homeBox container-fluid">
<br><br>
<a href="coachBookings.html">View Coach Bookings</a>
</div>
<div class="footer container-fluid" style="text-decoration:none; position:fixed;">
<br>
<p>© 2022 Horizon Travels. All rights reserved <a href="privacystatement.html">Privacy Statement</a> Horizon Travels</p>
</div>
</body>
</html>
`
`
.register-form {
border: 2px solid;
margin: auto;
background-color: black;
box-sizing: border-box;
color: grey;
opacity: 0.8;
}
.register-form-container {
box-sizing: content-box;
height: 725px;
width: 1000px;
color: white;
text-align: center;
font-weight: bold;
background-color: black;
opacity: 0.95;
}
.login-form-container {
box-sizing: border-box;
height: 375px;
width:1000px;
color: white;
text-align: center;
font-weight: bold;
background-color: black;
opacity: 0.95;
}
body {
background-image: url('https://tahititourisme.uk/wp-content/uploads/2017/08/ICThalasso_030718_0751_HD%C2%A9RomeoBalancourt-1920px.jpg');
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
* {
box-sizing: border-box;
}
.row:after {
content: "";
clear: both;
display: block;
}
[class*="col-"] {
float: left;
padding: 15px;
}
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 400px) {
/* For mobiles: */
.col-x-1 {width: 8.33%; font-size: 6px;}
.col-x-2 {width: 16.66%;}
.col-x-3 {width: 25%;}
.col-x-4 {width: 33.33%;}
.col-x-5 {width: 41.66%;}
.col-x-6 {width: 50%;}
.col-x-7 {width: 58.33%;}
.col-x-8 {width: 66.66%;}
.col-x-9 {width: 75%;}
.col-x-10 {width: 83.33%;}
.col-x-11 {width: 91.66%;}
.col-x-12 {width: 100%;}
}
@media only screen and (min-width: 700px) {
/* For tablets: */
.col-m-1 {width: 8.33%; font-size: 13px;}
.col-m-2 {width: 16.66%;}
.col-m-3 {width: 25%;}
.col-m-4 {width: 33.33%;}
.col-m-5 {width: 41.66%;}
.col-m-6 {width: 50%;}
.col-m-7 {width: 58.33%;}
.col-m-8 {width: 66.66%;}
.col-m-9 {width: 75%;}
.col-m-10 {width: 83.33%;}
.col-m-11 {width: 91.66%;}
.col-m-12 {width: 100%;}
}
@media only screen and (min-width: 900px) {
/* For desktop: */
.col-1 {width: 8.33%; font-size:20px;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
.homeBox {
border: solid 1px;
margin-right: 200px;
background-color: black;
color: white;
height: 100px;
font-weight: bold;
text-align: center;
text-decoration: none;
opacity: 0.9;
}
.footer {
bottom: 0;
left:0;
width: 100%;
background-color: white;
color: black;
opacity: 0.8;
}
`
I tried using both media queries and bootstrap but still nothing works
Try setting this inside your head:
<meta name="viewport" content="width=device-width, initial-scale=1" />