I am deploying my webiste to production and running the Lighthouse audit. The audit is throwing an error when running the audit. It is tell me that the "The viewport size of 373px does not match the window size of 360px". I have validated my HTML and CSS but have not found the specific error. I am not sure if it is in the .style.width of my side nav bars.
Javascript:
function openNav() {
document.getElementById("mySidenav").style.width = "150px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
function openNav2() {
document.getElementById("mySidenav2").style.width = "150px";
}
function closeNav2() {
document.getElementById("mySidenav2").style.width = "0";
}
function openNav3() {
document.getElementById("mySidenav3").style.width = "150px";
}
function closeNav3() {
document.getElementById("mySidenav3").style.width = "0";
}
CSS
* {
box-sizing: border-box;
}
.row {
display: flex;
}
/* Create three equal columns that sits next to each other */
.column {
flex: 33.33%;
padding: 5px;
}
.imgHoover:hover {
box-shadow: 1px 3px 5px rgba(0,0,0,0.1);
}
.imgHoover {
padding: 10px 16px;
margin: 10px 0;
/*box-shadow: 2px 2px grey;*/
border-bottom: 1px solid #fafafa;
/*border: 5px solid #fab95b;*/
}
#form1 {
padding: 10px;
border: 1px solid #666;
background: #fff;
display: none;
justify-content: center;
}
#form2 {
padding: 10px;
border: 1px solid #666;
background: #fff;
justify-content: center;
}
/* card center */
.card {
margin: 0 auto; /* Added */
float: none; /* Added */
margin-bottom: 10px; /* Added */
/*box-shadow: 5px 5px grey*/
}
.card:hover {
box-shadow: 4px 8px 12px rgba(0,0,0,0.1);
}
/* side-nav */
body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #ffffff;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
color: #818181;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
html{overflow-x: hidden;}
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<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://fonts.googleapis.com/css?family=Audiowide">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="manifest" href="manifest.json">
<!-- ios support -->
<link rel="apple-touch-icon" href="images/logo/icon-96x96.png">
<meta name="apple-mobile-web-app-status-bar" content="#292927">
<meta name="theme-color" content="#292927">
<title>Home-Online Supplements</title>
</head>
<body>
<nav class="navbar navbar-light" style="background-color: #b8dff0;">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="images/logo/logo.png" alt="" width="30" height="24" class="d-inline-block align-top">
NextGen-Fitness</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="#" id="formButton">Login</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Categories
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Protein</a></li>
<li><a class="dropdown-item" href="#">Vitamins</a></li>
<li><a class="dropdown-item" href="#">Preworkout</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html" tabindex="-1" >Contact Us</a>
</li>
</ul>
<a class="nav-link text-left" href="#" id="userRegistered" style="color:black;" ></a>
<!-- <form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-dark" type="submit">Search</button>
</form> -->
</div>
</div>
</nav>
<div class="center-block">
<form id="form1">
<input type="text" name="firstName" placeholder="First Name" id="fname">
<br><br>
<input type="text" name="lastName" placeholder="Last Name" id="lname">
<br><br>
<input type="text" name="email" placeholder="Email" id="email">
<br><br>
<button type="button" class="btn btn-dark" id="btnUser" onclick="funcUser()">Login</button>
</form>
</div>
<!--Side Navbar #1 -->
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<div class="col-xl-7 col-lg-6 col-md-12 text-lg-rights text-center">
<img src="images/fatburner-logo2.png" alt class="img-fluid" style="width:100%">
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/fatburner-1.png" alt="fatBurner" style="width:100%" class="imgHoover">
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/fatburner-2.png" alt="fatBurner" style="width:100%" class="imgHoover">
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/fatburner-3.png" alt="fatBurner" style="width:100%" class="imgHoover">
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/fatburner-4.png" alt="fatBurner" style="width:100%" class="imgHoover">
</div>
</div>
</div>
</div>
<a href="#" class="nav-link">About</a>
</div>
<!--Side Navbar #2 -->
<div id="mySidenav2" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav2()">×</a>
<div class="col-xl-7 col-lg-6 col-md-12 text-lg-rights text-center">
<img src="images/preworkout-logo.png" alt class="img-
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
