How to remove the white space between content and footer - html

I have got a problem wherein I have this website and while its working well and I have a sticky footer on the bottom of the website it has alot of space between the end of the content
and I would like to remove the white space
now how would i go about this the html is here:
<html lang="en">
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<link href="menu1.css" rel="stylesheet">
<link href="author.css" rel="stylesheet">
<!-- Social Media Icon Library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title></title>
</head>
<body>
<head>
<!--Navigation-->
<article class="top">
<div class="" id="line">
<img class="logo" src="logo.png" alt="logo">
<h1><span class="lines">D.P.P</span></h1>
</div>
<span class="lines">
<ul>
<li>Home</li>
<li>Nada menos que Max</li>
<li>Inspiration</li>
<li>Contact</li>
</ul>
<hr>
<hr>
</span>
<script src="menu.js"></script>
</article>
<div class="spacer"> </div>
</head>
<main id="content">
<table>
<tr>
<td id="main">
<h3> </h3>
<span>.</span>
</td>
<td id="img"><img id="Diana" src=""></td>
</tr>
</table>
</main>
</body>
<footer>
<hr>
<article>
<p>Connect</p>
obviously personal info removed for this as not important.
the css im using are the following:
author.css:
h3
{
text-align: center;
}
#main
{
width: 66%;
margin-right: 100px;
margin-left: 150px;
padding-left: 100px;
padding-right:5%;
}
#Diana
{
height: 50%;
}
#img
{
width: 33%;
margin-right: 40px;
}
Menu.css for the nav bar and top part:
ul
{
width:100%;
list-style: None;
margin: 0;
padding: 0;
top: 0;
background-color: #7d8a96;
}
li
{
width:25%;
float:left;
border-right: none;
}
li:last-child
{
border-right:none;
}
li a
{
display: block;
width:100%;
background:#f9f7fa;
padding:4% 10%;
font-size:1em;
text-decoration: none;
}
#media screen and (max-width: 768px) {
#menu
{
width:1.4em;
display: block;
background:#ddd;
font-size:1.35em;
text-align: center;
}
#nav.js
{
display: none;
}
ul
{
width:100%;
list-style:none;
}
li
{
width:100%;
border-right:none;
}
}
#media screen and (min-width: 768px)
{
#menu
{
display: none;
}
}
/*Lines on sides*/
.lines
{
line-height: 0.5;
text-align: center;
}
.lines span
{
display: inline-block;
position: relative;
}
.lines span:before,
.lines span:after
{
content: "";
position: absolute;
height: 5px;
border-bottom: 1px solid white;
border-top: 1px solid white;
top: 0;
width: 600px;
}
.lines span:before
{
right:100%;
margin-right: 15px;
}
lines span:after
{
left: 100%;
margin-left: 15px;
}
h1
{
margin-top: 50px;
font-size: 1rem;
font-style: oblique;
font-weight: thin;
color: #4e565e;
text-align: center;
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
}
.top
{
width: 100%;
height: 100px;
padding: 10px;
}
.spacer
{
width: 100%;
height: 100px;
}
#content
{
margin-top: 50px;
width: 100%;
height: 100%;
padding: 10px;
}
.logo
{
display: block;
margin-left: auto;
margin-right: auto;
width: 5%;
margin-bottom: -50px;
}
and style.css
*
{
margin: 0;
padding: 0;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}
footer
{
margin-top: 150px;
flex-shrink: 0;
text-align: center;
}
html, body
{
height: 100%;
}
body
{
display: flex;
flex-direction: column;
}
#content
{
min-height: calc(100vh - 70px);
height: auto !important;
height: 100%;
margin: 0 auto -142px;
flex: 1 0 auto;
}
how would i go about this


Maybe you can change the contents minimum height, as currently it is set to 100vh
change
#content
{
min-height: calc(100vh - 70px);
}
to
#content
{
min-height:30vh;
}

Related

responsive webpage works partially

some device like iMac it look perfect but some i see white box in other pc.in tablet and mobile screen gets auto zoom its not fit to device i have to zoom out which makes content small.
* {
list-style: none;
text-decoration: none;
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #f7f7f7;
color: #545454;
}
/* NAVIGATION */
.navbar {
width: 100%;
height: 150px;
background: black;
position: fixed;
top: 0;
left: 0;
padding: 0 25px;
}
.navbar .inner_navbar {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 100%;
}
.navbar .hamburger {
display: none;
}
.navbar .menu ul {
display: flex;
}
.navbar .menu ul li a {
display: block;
width: 120px;
margin-right: 10px;
text-align: center;
font-size: 14px;
text-transform: uppercase;
color: #fff;
padding: 10px;
border-radius: 25px;
letter-spacing: 2px;
transition: all 0.2s ease;
}
.navbar .menu ul li:last-child a {
margin-right: 0;
}
.navbar .menu ul li a:hover,
.navbar .menu ul li a.active {
background: #5db485;
}
.container {
margin-top: 150px;
width: 1906px;
height: 397px;
}
.promo {
width: 1906px;
}
/* Safari Tours*/
.safari-tours {
background: linear-gradient(to bottom, #65214a, #8d2353, #b52455, #db2c4f, #fd3f41);
;
width: 1906px;
}
.safari-title {
text-align: center;
padding-top: 30px;
font-size: 50px;
}
.banner {
display: flex;
justify-content: center;
}
.safari {
margin: 2%;
}
.safari img {
width: 500px;
}
/*Tablet*/
#media (max-width: 992px) {
.navbar {
height: 218px;
padding: 12px;
}
.navbar .inner_navbar {
flex-direction: column;
}
.container {
margin-top: 218px;
}
}
/*Mobile*/
#media (max-width: 728px) {
.navbar {
height: 150px;
}
.navbar .inner_navbar {
flex-direction: row;
}
.navbar .menu ul {
position: absolute;
top: 150px;
left: 0;
display: block;
background: orangered;
width: 100%;
}
.navbar .menu ul li {
padding: 10px;
}
.navbar .menu ul li a {
width: 100%;
padding: 12px;
}
.navbar .hamburger {
display: block;
position: absolute;
top: 15px;
right: 25px;
color: #fff;
font-size: 24px;
cursor: pointer;
transition: all 0.2s ease;
}
.navbar .menu {
display: none;
}
.navbar .menu.activate {
display: block;
}
.container {
margin-top: 150px;
width: 690px;
height: 144px;
}
.promo {
width: 690px;
}
.safari-tours {
background: linear-gradient(to bottom, #65214a, #8d2353, #b52455, #db2c4f, #fd3f41);
width: 690px;
}
.safari {
margin: 1%;
}
.safari img {
width: 300px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="wrapper">
<div class="navbar">
<div class="inner_navbar">
<div class="logo">
<img src="/images/Final Logo.png" style="width: 150px;">
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>Desert Safari</li>
<li>Tours</li>
<li>Activities</li>
<li>Contact-Us</li>
</ul>
</div>
</div>
<div class="hamburger">
<img src="/images/menu-btn.png" style="width: 40px;">
</div>
</div>
<div class="container">
<img class="promo" src="https://www.arabian-adventures.com/on/demandware.static/-/Sites-dnata-UAE-Library/default/dw922d22bf/images/slider/luxury-desert-camping-arabian-adventures-1920x400.jpg" alt="">
</div>
</div>
</header>
<section>
<div class="safari-tours">
<h1 class="safari-title">SAFARI TOURS</h1>
<div class="banner">
<div class="safari">
<img src="https://i.imgur.com/9QH8NFE.jpeg" alt="Morning Safari" />
</a>
</div>
<div class="safari">
<a href="https://bigdunestours.com/desert-safari" target="_top">
<img src="https://i.imgur.com/2E9ytwc.jpeg" alt="Evening Safari" />
</a>
</div>
</div>
</div>
</section>
<script>
var hamburger = document.querySelector(".hamburger");
var menu = document.querySelector(".menu");
hamburger.addEventListener("click", function() {
menu.classList.toggle("activate");
})
</script>
</body>
</html>
some device like iMac it look perfect but some i see white box in other pc.in tablet and mobile screen gets auto zoom its not fit to device i have to zoom out which makes content small.
edited i did try as one of the comment mention but still no luckk the results are something like this
*{
list-style: none;
text-decoration: none;
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background: #f7f7f7;
color: #545454;
}
/* NAVIGATION */
.navbar{
width: 100%;
height: 150px;
background: black;
position: fixed;
top: 0;
left: 0;
padding: 0 25px;
}
.navbar .inner_navbar{
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 100%;
}
.navbar .hamburger{
display: none;
}
.navbar .menu ul{
display: flex;
}
.navbar .menu ul li a{
display: block;
width: 120px;
margin-right: 10px;
text-align: center;
font-size: 14px;
text-transform: uppercase;
color: #fff;
padding: 10px;
border-radius: 25px;
letter-spacing: 2px;
transition: all 0.2s ease;
}
.navbar .menu ul li:last-child a{
margin-right: 0;
}
.navbar .menu ul li a:hover,
.navbar .menu ul li a.active{
background: #5db485;
}
.container{
width: 100%;
max-width: 1906;
}
/*Tablet*/
#media (max-width: 992px){
.navbar{
height: 218px;
padding: 12px;
}
.navbar .inner_navbar{
flex-direction: column;
}
.container {
max-width: 991.98px;
}
}
/*Mobile*/
#media (max-width: 728px){
.navbar{
height: 150px;
}
.navbar .inner_navbar{
flex-direction: row;
}
.navbar .menu ul{
position: absolute;
top: 150px;
left: 0;
display: block;
background: orangered;
width: 100%;
}
.navbar .menu ul li{
padding: 10px;
}
.navbar .menu ul li a{
width: 100%;
padding: 12px;
}
.navbar .hamburger{
display: block;
position: absolute;
top: 15px;
right: 25px;
color: #fff;
font-size: 24px;
cursor: pointer;
transition: all 0.2s ease;
}
.navbar .menu{
display: none;
}
.navbar .menu.activate{
display: block;
}
.container{
max-width: 727.98px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="navbar">
<div class="inner_navbar">
<div class="logo">
<img src="/images/Final Logo.png" style="width: 150px;">
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>Desert Safari</li>
<li>Tours</li>
<li>Activities</li>
<li>Contact-Us</li>
</ul>
</div>
</div>
<div class="hamburger">
<img src="/images/menu-btn.png" style="width: 40px;">
</div>
<div class="container">
<img class="promo" src="https://www.arabian-adventures.com/on/demandware.static/-/Sites-dnata-UAE-Library/default/dw922d22bf/images/slider/luxury-desert-camping-arabian-adventures-1920x400.jpg" alt="">
</div>
</div>
</div>
<script>
var hamburger = document.querySelector(".hamburger");
var menu = document.querySelector(".menu");
hamburger.addEventListener("click", function(){
menu.classList.toggle("activate");
})
</script>
</body>
</html>

Use 100% width and set a max-width for each #media.
Important: use % in your main layout, not absolute pixels.
By using this the content will not overflow the .container
.container {
width: 100%;
max-width: 1906px;
}
#media (max-width: 992px) {
.container {
/* width 100% is set aboven*/
max-width: 991.98px;
}
}
#media (max-width: 728px) {
.container {
/* width 100% is set aboven*/
max-width: 727.98px;
}
}

now my footer covering my content and navbar

I have any issue, i have been make some footer and when i test my new footer, the Footer covered the content and navbar. i still figure it out how to solve this problem. hope i can get some answer at here...
$(".togel.tblmenu").click(function () {
$(".menu").toggleClass("sh");
});
body {
min-height: 400px;
margin-bottom: 100px;
clear: both;
background: #eff2f7;
}
a {
left: -50;
text-decoration: none;
color: white;
display: block;
transition: 0.3s;
font-size: 20px
}
a:hover {
transition: 0.3s;
}
nav {
position: fixed;
top: 0;
left: 20px;
right: 0;
background: #1e77b0;
font-family: Palatino Linotype;
}
.title {
display: inline-block;
float: left;
line-height: 50px;
}
.menu {
display: inline-block;
float: left;
}
.menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.menu ul li {
display: inline-block;
}
.menu ul li a {
padding: 0 50px;
display: block;
line-height: 50px;
}
.menu li:hover {
background-color: #009cff;
}
.wrap {
width: 95%;
margin: 0 auto;
}
.tblmenubox {
display: inline-block;
float: right;
line-height: 50px;
}
.tblmenu {
display: block;
position: absolute;
width: 25px;
height: 25px;
background: #1e77b0;
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
}
.tblmenubox {
display: none;
visibility: hidden;
}
.kotakpersegi {
display: block;
position: absolute;
left: -40px;
width: 250px;
height: 50px;
background: #009cff;
transform: translateY(-50%);
-webkit-transform: skew(30deg);
-moz-transform: skew(30deg);
-o- transform: skew(30deg);
transform: skew(30deg)
}
.logo {
position: absolute;
left: 50px;
}
#media screen and (max-width:1000px) {
.kotakpersegi {
width: 150%;
}
.logo {
position: absolute;
float: center;
left: 25%;
}
.menu {
display: none;
}
.tblmenubox {
display: block;
visibility: visible;
}
.menu.sh {
display: block;
position: absolute;
top: 50px;
background: #1e77b0;
width: 100%;
left: 0;
}
.menu a:hover {
color: #eff2f7;
background: #009cff;
}
.menu ul li {
display: block;
text-align: center;
}
}
/*navbar code*/
.footer-bottom {
text-align: center;
background-color: #1e77b0;
width: 100%;
position: relative;
bottom: 50%;
}
.Footer-header h3 {
font-family: 'Roboto Condensed', sans-serif;
color: white;
margin: 20px;
text-align: left;
}
.Footer-Sponsored img {
height: 128px;
margin: 10px;
}
hr {
margin: 20px;
border: 0.5px solid lightblue;
}
.hr1 {
margin: 40px;
}
.Footer-deep {
margin: 30px;
}
.Footer-deep img {
height: 30px;
margin: 10px;
}
.Footer-deep h3 {
color: white;
font-family: 'Garamond', sans-serif;
font-size: 100%;
}
.content-wrapper { /* added a top margin */
margin-top: 50px; /* We know this is the height because it is applied specifically in CSS */
padding: 30px;
}
.content-wrapper h1 {
font-family: Palatino Linotype;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght#1,300&display=swap" rel="stylesheet">
<!-- Navbar -->
<nav>
<div class="wrap">
<div class="title">
<div class="kotakpersegi">
<a href="">
<img class="logo" src="img/logo.png" width="180" height="50">
</a>
</div>
</div>
<div class="tblmenubox">
<div class="togel tblmenu">
</div>
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>Contact</li>
<li>Service</li>
<li>Fiture</li>
<li>Maps</li>
</ul>
</div>
</div>
</nav>
<!-- Navbar -->
<div class="content-wrapper">
<h1>San Andreas Motor Racing Grand Prix</h1>
</div>
<!-- content stop here -->
<footer class="footer-bottom">
<div class="Footer-header">
<h2>San Andreas Motor Racing</h2>
<hr class="Light-line">
<h3>Sponsored By</h3>
</div>
<div class="Footer-Sponsored">
<img src="Sponsored/1.jpg">
<img src="Sponsored/2.png">
<img src="Sponsored/3.jpg">
</div>
<hr class="hr1">
<div class="Footer-deep">
<img src="img/logo.png" align="left">
<h3 align="right">San Andreas Motor Racing Championship</h3>
</div>
</footer>
i have tried to change the position to relative absolute or whatever but it make me found another problem. maybee some one can help me to fix this problem, please.... i have been try to solve his problem by googling for a day and still doesn't have any clue about this problem...

Just add z-index:10 to nav css style
body {
min-height: 400px;
margin-bottom: 100px;
clear: both;
background: #eff2f7;
}
a {
left: -50;
text-decoration: none;
color: white;
display: block;
transition: 0.3s;
font-size: 20px
}
a:hover {
transition: 0.3s;
}
nav {
position: fixed;
top: 0;
left: 20px;
right: 0;
background: #1e77b0;
font-family: Palatino Linotype;
z-index:10;
}
.title {
display: inline-block;
float: left;
line-height: 50px;
}
.menu {
display: inline-block;
float: left;
}
.menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.menu ul li {
display: inline-block;
}
.menu ul li a {
padding: 0 50px;
display: block;
line-height: 50px;
}
.menu li:hover {
background-color: #009cff;
}
.wrap {
width: 95%;
margin: 0 auto;
}
.tblmenubox {
display: inline-block;
float: right;
line-height: 50px;
}
.tblmenu {
display: block;
position: absolute;
width: 25px;
height: 25px;
background: #1e77b0;
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
}
.tblmenubox {
display: none;
visibility: hidden;
}
.kotakpersegi {
display: block;
position: absolute;
left: -40px;
width: 250px;
height: 50px;
background: #009cff;
transform: translateY(-50%);
-webkit-transform: skew(30deg);
-moz-transform: skew(30deg);
-o- transform: skew(30deg);
transform: skew(30deg)
}
.logo {
position: absolute;
left: 50px;
}
#media screen and (max-width:1000px) {
.kotakpersegi {
width: 150%;
}
.logo {
position: absolute;
float: center;
left: 25%;
}
.menu {
display: none;
}
.tblmenubox {
display: block;
visibility: visible;
}
.menu.sh {
display: block;
position: absolute;
top: 50px;
background: #1e77b0;
width: 100%;
left: 0;
}
.menu a:hover {
color: #eff2f7;
background: #009cff;
}
.menu ul li {
display: block;
text-align: center;
}
}
/*navbar code*/
.footer-bottom {
text-align: center;
background-color: #1e77b0;
width: 100%;
position: relative;
bottom: 50%;
}
.Footer-header h3 {
font-family: 'Roboto Condensed', sans-serif;
color: white;
margin: 20px;
text-align: left;
}
.Footer-Sponsored img {
height: 128px;
margin: 10px;
}
hr {
margin: 20px;
border: 0.5px solid lightblue;
}
.hr1 {
margin: 40px;
}
.Footer-deep {
margin: 30px;
}
.Footer-deep img {
height: 30px;
margin: 10px;
}
.Footer-deep h3 {
color: white;
font-family: 'Garamond', sans-serif;
font-size: 100%;
}
.content-wrapper { /* added a top margin */
margin-top: 50px; /* We know this is the height because it is applied specifically in CSS */
padding: 30px;
}
.content-wrapper h1 {
font-family: Palatino Linotype;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>SA-MR</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS document -->
<link rel="stylesheet" type="text/css" href="css/SAMRnavbar.css">
<meta charset="utf-8">
<!-- font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght#1,300&display=swap" rel="stylesheet">
</head>
<body>
<!-- Navbar -->
<nav>
<div class="wrap">
<div class="title">
<div class="kotakpersegi">
<a href="">
<img class="logo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Test-Logo.svg/1175px-Test-Logo.svg.png" width="180" height="50">
</a>
</div>
</div>
<div class="tblmenubox">
<div class="togel tblmenu">
</div>
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>Contact</li>
<li>Service</li>
<li>Fiture</li>
<li>Maps</li>
</ul>
</div>
</div>
</nav>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
$(".togel.tblmenu").click(function () {
$(".menu").toggleClass("sh");
});
</script>
<!-- Navbar -->
<div class="content-wrapper">
<h1>San Andreas Motor Racing Grand Prix</h1>
</div>
<!-- content stop here -->
<footer class="footer-bottom">
<div class="Footer-header">
<h2>San Andreas Motor Racing</h2>
<hr class="Light-line">
<h3>Sponsored By</h3>
</div>
<div class="Footer-Sponsored">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Test-Logo.svg/1175px-Test-Logo.svg.png">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Test-Logo.svg/1175px-Test-Logo.svg.png">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Test-Logo.svg/1175px-Test-Logo.svg.png">
</div>
<hr class="hr1">
<div class="Footer-deep">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Test-Logo.svg/1175px-Test-Logo.svg.png" align="left">
<h3 align="right">San Andreas Motor Racing Championship</h3>
</div>
</footer>
</body>
</html>

This can be resolved by adding 'z-index: -1;' to your footer-bottom class.
Learn more about z-indexing here
In the most basic cases, HTML pages can be considered two-dimensional, because text, images, and other elements are arranged on the page without overlapping. In this case, there is a single rendering flow, and all elements are aware of the space taken by others. The z-index attribute lets you adjust the order of the layering of objects when rendering content.
In addition to their horizontal and vertical positions, boxes lie along a "z-axis" and are formatted one on top of the other. Z-axis positions are particularly relevant when boxes overlap visually.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index

You should change the z-order of your elements.
Set z-index of footer less than z-index of the navbar (enough set z-index: -1 for footer)
More info:
https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

Site works fine in Brave and Microsoft Edge (chromium based) but has problem in Firefox

The site works totally fine, but the responsiveness has some problems in firefox. Instead of shrinks and adapt to the window size, some sections get hidden instead of show themselves.
HTML and CSS is the same, it's a very simple site, so I don't know why on FF I have these problems.
Code below:
<!DOCTYPE html>
<html lang="it" dir="ltr">
<head>
<link rel="stylesheet" href="style.css">
<link
href="https://fonts.googleapis.com/css2?family=Domine:wght#400;700&family=Lora:ital,wght#0,400;0,600;0,700;1,400;1,500&family=Montserrat:wght#300;400;700&display=swap"
rel="stylesheet">
<link rel="icon" href="images/alebacce.ico">
<link href="mobile.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 480px)" />
<link href="tablet.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 481px) and (max-width: 960px)" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>Bacce's Angle</title>
</head>
<body>
<nav>
<label for="toggle">☰</label>
<input type="checkbox" id="toggle"/>
<div class="menu">
Home
Chi sono
Skills
Interessi
<span class="contactmenu">Contattami</span>
</div>
</nav>
<div class="main">
<picture>
<source
media="(min-width: 650px)"
srcset="images/webdevlr2.png">
<source
media="(max-width: 465px)"
srcset="images/webdevlr2mobile.png">
<img src="images/webdevlr2.png"
alt="Welcome on my site!">
</picture>
<div class="welcome">
<p>
<h1><strong>ALESSANDRO BACCELLI</h1></strong>
</p>
<p><em>Work in progress</em> WEB DEVELOPER</p>
</div>
</div>
<div class="divide first">
<div class="heading">
<h1 id="chisono">Chi sono</h1>
</div>
<div class="section1">
<div class="profile">
<img src="images/profiledefmobile.png" alt="A picture of me">
</div>
<div class="biography">
<p>Un ragazzo genovese di 24 anni, laureato in <em>Scienze della Comunicazione</em> da sempre appassionato di
tecnologia e digitale. <br><br> Ho recentemente scoperto
la mia passione per la programmazione grazie ai corsi di <strong>start2impact</strong>,
iniziando il mio viaggio nel mondo di Html, CSS e via discorrendo... <br><br>
Per quanto la strada sia ancora lunga ho fiducia nel futuro, questo sito vuole infatti essere l'inizio di un
lungo percorso.</p>
<div class="download">
<button>Scarica il mio CV</button>
</div>
</div>
</div>
</div>
<div class="divide colordifferent">
<div class="heading margin">
<h1 id="skills">Skills</h1>
</div>
<div class="section2">
<div class="hard">
<h2>Hard skills</h2>
<ul>
<li>Inglese fluente</li>
<li class="modifiedli">HTML</li>
<li class="modifiedli">CSS</li>
<li>Canva</li>
</ul>
</div>
<div class="soft">
<h2>Soft skills</h2>
<ul>
<li>Autonomia</li>
<li>Fast learner</li>
<li>Empatia</li>
<li>Ascolto attivo</li>
</ul>
</div>
</div>
</div>
<div class="divide">
<div class="heading bottomodif">
<h1 id="interessi">Interessi</h1>
</div>
<div class="section2">
<div class="inte hard">
<ul>
<li id="programmazione">Coding</li>
<li id="foto">Fotografia digitale</li>
<li id="grafica">Grafica</li>
<li id="discover">Scoprire nuove cose</li>
<li id="cucina">Cucina</li>
<li id="videogiochi">Video-games</li>
</ul>
</div>
<div class="ressi soft">
<ul>
<li id="self">Self-growth</li>
<li id="mind">Mindfulness</li>
<li id="fit">Fitntess & Health</li>
<li id="storia"><span class="history">Storia e Antropologia</span></li>
<li id="book">Lettura</li>
<li id="eco">Ambiente</li>
</ul>
</div>
</div>
</div>
<footer id="chiamami">
<div class="foot"></div>
<div class="foot contact">E-mail<span class="not"><br></span><span class="bracket"> | </span>Linkedin<span class="not"><br></span><span class="bracket"> | </span>Start2impact<br>
<br> ALESSANDRO BACCELLI 2020 ©</div>
<div class="foot"></div>
</footer>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 16px;
background-color: #E5DDC8;
color: #1F1F1F;
}
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: #EBFDFF;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #B1C5E7;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #7699D4;
}
h1,
h2 {
font-family: "Montserrat", "Helvetica", "Arial", sans-serif;
color: #141414;
}
nav {
text-align: right;
font-size: 120%;
height: 100px;
line-height: 100px;
z-index: 99999;
position: relative;
background-color: #004369;
}
.menu {
margin: 0 30px 0 0;
z-index: 10;
background-color: #004369;
}
.menu a {
clear: right;
text-decoration: none;
color: white;
margin: 0 10px;
line-height: 100px;
z-index: 10;
}
.menu a:hover {
text-decoration: underline;
}
.contactmenu {
color: #7EDD9A;
z-index: 10;
}
label {
margin: 0 40px 0 0;
font-size: 26px;
line-height: 100px;
display: none;
width: 26px;
float: right;
z-index: 10;
color: white;
}
#toggle {
display: none;
}
#media only screen and (max-width: 600px) {
label {
display: block;
cursor: pointer;
z-index: 10;
}
.menu {
text-align: center;
width: 100%;
display: none;
z-index: 9999;
}
.menu a {
display: block;
border-bottom: 1px solid #EAEAEB;
margin: 0;
z-index: 10;
}
.menu a:hover {
text-decoration: none;
}
#toggle:checked+.menu {
display: block;
}
}
.main {
display: block;
z-index: -1;
position: relative;
}
.welcome {
display: none;
color: #FFFFFF;
font-size: 3em;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
text-shadow: 2px 2px 2px #1F1F1F;
}
.welcome h1 {
white-space: nowrap;
color: #ffffff;
}
.main img {
width: 100%;
position: relative;
}
.divide {
height: 900px;
margin-top: 120px;
}
.heading {
font-family: "Montserrat",
"Helvetica",
"Arial",
sans-serif;
color: #141414;
font-size: 200%;
margin-bottom: 80px;
text-align: center;
word-wrap: break-word;
}
.first {
height: fit-content;
}
.section1 {
display: flex;
justify-content: center;
width: 958px;
margin: 0 auto;
}
.profile {
text-align: center;
}
.biography {
align-self: center;
font-size: 140%;
margin-left: 80px;
}
.biography a {
color: #01949A;
text-decoration: none;
}
.biography a:hover {
color: #004369;
text-decoration: underline;
}
.download {
display: flex;
justify-content: center;
margin: 0 auto;
}
.biography button {
font-size: 130%;
padding: 15px;
background-color: #01949A;
border-radius: 10px;
border: none;
margin-top: 40px;
}
.biography button a {
color: #ffffff;
text-decoration: none;
}
.biography button a:hover {
color: #ffffff;
text-decoration: none;
background-color: #004369;
}
.biography button:hover {
background-color: #004369;
}
.section2 {
display: flex;
margin: 0 auto;
justify-content: space-evenly;
font-size: 200%;
}
.colordifferent {
background-color: #E5F9E0;
padding-top: 120px;
}
.margin {
margin-bottom: 145px;
}
.hard h2,
.soft h2 {
margin-bottom: 25px;
}
.section2 ul {
list-style-type: none;
margin-bottom: 140px;
}
.section2 li {
margin-bottom: 25px;
;
}
.section2 ul li::before {
content: "\2705";
margin-right: 25px;
}
.section2 ul .modifiedli::before {
content: "🚧";
}
.section2 ul #programmazione::before {
content: "👨🏻‍💻";
}
.section2 ul #foto::before {
content: "📸";
}
.section2 ul #grafica::before {
content: "🎨";
}
.section2 ul #discover::before {
content: "🗺️";
}
.section2 ul #cucina::before {
content: "👨🏻‍🍳";
}
.section2 ul #videogiochi::before {
content: "🎮";
}
.section2 ul #self::before {
content: "📈";
}
.section2 ul #mind::before {
content: "🧘🏻‍♂️";
}
.section2 ul #fit::before {
content: "🏋🏻";
}
.section2 ul #storia::before {
content: "🏺";
}
.section2 ul #book::before {
content: "📖";
}
.section2 ul #eco::before {
content: "♻️";
}
.bottomodif {
margin-bottom: 110px;
}
footer {
display: flex;
text-align: center;
align-items: center;
height: 350px;
background-color: #004369;
color: #FFFFFF;
font-size: 130%;
}
.foot {
width: 33.33333%;
}
footer a {
color: #FFFFFF;
text-decoration: none;
}
footer a:hover {
text-decoration: underline;
}
.not {
display: none;
}
CSS Tablet
body {
width: 100%;
}
.divide,
.section1 {
width: 100%;
}
.first {
height: fit-content;
flex-direction: column;
}
.section1 {
width: 90%;
display: block;
}
.profile {
margin-bottom: 70px;
}
.profile img {
max-width: 100%;
height: auto;
}
.biography {
margin: 0 auto;
width: 90%;
}
.biography button {
margin-top: 70px;
}
.bracket {
display: none;
}
.not {
display: unset;
}
CSS Mobile
body {
display: flex;
flex-direction: column;
font-size: 90%;
width: 100%;
}
.main {
display: block;
}
.main img {
display: block;
min-height: 100%;
min-width: 100%;
position: static;
}
.welcome {
display: none;
}
.divide {
height: fit-content;
width: 100%;
}
.section1,
.section2 {
display: block;
width: 100%;
height: initial;
overflow-y: auto;
}
.profile img {
height: auto;
max-width: 100%;
margin-bottom: 20px;
}
.biography {
display: block;
width: 90%;
text-align: left;
margin-left: 5px;
margin: 0 auto;
}
.hard,
.soft {
text-align: center;
margin-bottom: 80px;
}
.hard h2,
.soft h2 {
margin-bottom: 50px;
}
.hard ul,
.soft ul {
text-align: left;
width: 70%;
margin: auto;
word-wrap: break-word;
}
.hard ul li,
.soft ul li {
padding-left: 65px;
text-indent: -65px;
}
.inte,
.ressi {
margin-bottom: 0;
}
.ressi ul {
margin-bottom: 150px;
}
.history {
padding-left: 10px;
}
.bracket {
display: none;
}
.not {
display: unset;
}

Background Scrolling is possible whilst menu is open(Codepen Included)

I have a navbar which disappears whilst scrolling up. When I open the hamburger menu, however, I am still able to have background scrolling as the navbar disappears. Is there a way to have the navbar static(in smaller windows) or just be able to disable background scrolling when the menu is open? Codepen Included below:
https://codepen.io/blairhunter/pen/PoNYOzj
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("diss").style.top = "0";
} else {
document.getElementById("diss").style.top = "-81.5px";
}
prevScrollpos = currentScrollPos;
}
Thank you.

i think this is what you want:
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("diss").classList.remove("hide");
} else {
document.getElementById("diss").classList.add("hide");
}
prevScrollpos = currentScrollPos;
}
#import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
}
#diss {
position: fixed;
width: 100%;
transition: transform 0.3s;
}
#diss.hide {
transform: translateY(-100%);
}
nav{
background: white;
height: 80px;
width: 100%;
display: block;
transition: top 0.3s;
}
label.logo{
color: black;
font-size: 26px;
line-height: 80px;
padding: 0 130px;
font-weight: 600;
font-family: 'Poppins', sans-serif;
}
nav ul{
float: right;
margin-right: 130px;
}
nav ul li{
display: inline-block;
line-height: 80px;
margin: 0 2px;
}
nav ul li a{
color: black;
font-weight: 500;
font-size: 16px;
padding: 7px 13px;
/* text-transform: uppercase; */
font-family: 'Poppins', sans-serif;
}
a.active,a:hover{
text-decoration: underline;
}
.checkbtn{
font-size: 30px;
color: black;
float: right;
line-height: 80px;
margin-right: 40px;
cursor: pointer;
display: none;
}
#check{
display: none;
}
#media (max-width: 952px){
label.logo{
font-size: 27px;
padding-left: 25px;
}
nav ul li a{
font-size: 16px;
}
}
#media (max-width: 858px){
.checkbtn{
display: block;
margin-right: 40px;
}
ul{
position: fixed;
width: 100%;
height: 100vh;
background: #212120;
top: 81.5px;
left: -100%;
text-align: center;
transition: all .5s;
}
nav ul li{
display: block;
margin: 50px 0;
line-height: 30px;
}
nav ul li a{
font-size: 20px;
color:white;
}
a:hover,a.active{
background: none;
color: white;
}
#check:checked ~ ul{
left: 0;
}
}
/* Content */
.divide {
height:1.5px;
background-color:lightgrey;
}
.main {
margin-top:80px;
height:400px;
background-color:#212120;
}
.detail {
font-size:30px;
font-family: 'Poppins', sans-serif;
line-height: 40px;
font-weight: 500;
color:#fbccc9;
padding-left: 130px;
padding-right:130px;
padding-top:15px;
}
.pagetitle {
font-size:46px;
font-family: 'Poppins', sans-serif;
line-height: 55px;
font-weight: 600;
color:white;
padding-left: 130px;
padding-right:130px;
padding-top:100px;
}
#media (max-width: 952px){
.pagetitle{
padding-left: 25px;
padding-right: 25px;
padding-top:50px;
font-size: 26px;
}
.detail{
padding-left: 25px;
padding-right: 25px;
padding-top:20px;
font-size: 18px;
}
.main {
height:310px;
}
.diss {
position:fixed;
}
}
/* Container */
.container {
padding-left: 130px;
padding-right:130px;
}
.heading {
font-size:30px;
font-family: 'Poppins', sans-serif;
line-height: 40px;
font-weight: 600;
padding-top:25px;
padding-bottom:10px;
}
#media (max-width: 952px){
.container{
padding-left: 25px;
padding-right: 25px;
}
/* Project Boxes */
.row {
margin: 8px -16px;
}
/* Add padding BETWEEN each column */
.row,
.row > .column {
padding: 8px;
}
/* Create four equal columns that floats next to each other */
.column {
float: left;
width: 25%;
}
/* Clear floats after rows */
.row:after {
display: table;
clear: both;
}
/* Responsive layout - makes a two column-layout instead of four columns */
#media screen and (max-width: 952px) {
.column {
width: 50%;
}
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Name</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="script.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<link rel="icon" type="image/png" href="img/favicon.jpg"/>
<div id="diss">
<nav>
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<i class="fas fa-bars"></i>
</label>
<label class="logo">Name</label>
<ul>
<li>Home</li>
<li>Profile</li>
<li>Work</li>
</ul>
</nav>
<div class="divide"></div>
</div>
<div class="divide"></div>
</head>
<body>
<div class="main">
<h1 class="pagetitle">Hello, this is the main text.<h1>
<h2 class="detail">This is the subheading here</h2>
</div>
<section class="container">
<h2 class="heading">Title</h2>
<!-- Portfolio Gallery Grid -->
<div class="row">
<div class="column">
<img src="img/placement.jpg" alt="Mountains" style="width:100%">
</div>
<div class="column">
<img src="img/placement.jpg" alt="Lights" style="width:100%">
</div>
<div class="column">
<img src="img/placement.jpg" alt="Nature" style="width:100%">
</div>
<div class="column">
<img src="img/placement.jpg" alt="Mountains" style="width:100%">
</div>
<!-- END GRID -->
</div>
</section>
</body>
</html>

Meta viewport doesn't work for my website

What I should do to this page: to work right in mobile. I have tried meta viewport but It doesn't work. You can find the page here:
and html:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" href="english.css">
<link href='http://fonts.googleapis.com/css?family=EB+Garamond' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body>
<header class="mainHeader">
<ul>
<li>Magazine</li>
<li>About</li>
<li>Archive</li>
<li>Books</li>
<li>Contact</li>
</ul>
</header>
<section class="wr">
<img src="images/right.png" class="right">
<img src="images/left.png" class="left">
<section class="wrapper">
<div class="container">
<h1>Photographer</h1>
<h1>Story</h1>
<p>DescriptionDescriptionDescription</p>
</div>
</section>
</section>
</body>
</html>
and css:
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-color: black;
}
body{
color: rgba( 255, 255, 255, 0.9 );
font-family: Helvetica, sans-serif;
background-image: url("images/14thcover.jpg") ;
background-size: 100%;
background-repeat: no-repeat;
}
a:hover{
color: black;
}
.mainHeader {
float: right;
font-size: 1.3em;
margin-right: 0.8em;
margin-top: 2em;
line-height: 1.2;
}
ul {
list-style-type: none;
}
.mainHeader a{
color: rgba(255,255,255,0.9)
}
.mainHeader a:hover {
color: rgba(255,255,255,0.7)
}
.wr {
width: 75%;
height:60%;
min-height: 65%;
position: absolute;
top:0;
bottom: 0;
right:0;
left:0;
margin: auto;
overflow: auto;
}
.right {
position: absolute;
top: 49%;
right: 0;
}
.left {
position: absolute;
top: 49%;
left: 0;
}
.wrapper {
width: 80%;
height:auto;
background-color: white;
position: absolute;
top:0;
bottom: 0;
right:0;
left:0;
margin: auto;
overflow: auto;
}
.wrapper ul li{
list-style-type: none;
display: inline;
font-size: 2em;
}
.title {
color: red;
}
.name, .lead {
color: black;
}
.lead {
font-size: 1.3em;
}
.container {
width: auto;
top: 35%;
left: 50%;
position: absolute;
overflow: auto;
transform: translate(-50%, -50%);
direction: rtl;
font-weight: 80;
}
.container h1 {
display: inline;
font-weight: 100;
font-size: 2em;
margin-bottom: 1em;
}
.container p {
margin-top: 1em;
text-decoration: none;
}

That works as you have specified in your CSS. The problem is that these specific widths do not fit in smaller resolutions on the device screen without overlapping.
You must specify:
#media (max-with: 768px) {
.mainHeader {
float: none;
}
}
You can reduce sizes and font sizes to still have the same look as in greater resolutions, but text become not readable or clickable

Meta will work after reading this https://developers.google.com/web/fundamentals/getting-started/your-first-multi-screen-site/responsive