Content is not sized correctly for the viewport

Question

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:




    
        
        
        
        
        
        
        
        
        
        
        

        
        
        
        
        Home-Online Supplements
    
    
        
            
                
                    
                    NextGen-Fitness
                
                
                
                    
                    
                    Login
                    
                    
                    
                        Categories
                    
                    
                        Protein
                        Vitamins
                        Preworkout
                        
                        
                    
                    
                    
                    Contact Us
                    
                
                
               
                
            
            
        

            
                
                    
                    


                    
                    


                    
                    


                    
                
            


        

        
            ×
            
                           
            
            
                
                    
                        
                            
                        
                    
                
            
            
                
                    
                        
                        
                            
                        
                    
                
            


            
                
                    
                        
                            
                        
                        
                    
                
            

            
                
                    
                       
                        
                            
                        
                    
                
            

            About
            
        

        

        
            ×
            
                           
            
            
                
                    
                        
                            
                        
                    
                
            
            
                
                    
                        
                        
                            
                        
                    
                
            


            
                
                    
                        
                            
                        
                        
                    
                
            

            
                
                    
                       
                        
                            
                        
                    
                
            

            About
            
        

        

        
            ×
            
                           
            
            
                
                    
                        
                            
                        
                    
                
            
            
                
                    
                        
                        
                            
                        
                    
                
            


            
                
                    
                        
                            
                        
                        
                    
                
            

            
                
                    
                       
                        
                            
                        
                    
                
            

            About
            
        

        

        
                
                    
                        
                            
                                   
                                    
                                    Browse all Products 
                                    

                                
                            
                        
                        
                            
                        
                    

                
        

            
                
                    
                        
                            
                            Fatburner
                        
                        
                            
                            Preworkout
                        
                        
                            
                            Protein
                        
                    
                    


                    

                
            

            
                            
                           
            
            

                
                    
                                        
                                        " Hand-picked ingredients and expertly crafted products, 
                                            designed for the modern athletes and trainers."
                    

                
            

            
                        
            

            


            
                    
                                        
                                    Benefits Of Protein Supplementation

                                    1.Fast digesting and more easily absorbed than other protein sources

                                    2.Increased muscle mass, especially when taken post-workout

                                    3.Improved appetite control, and greater feelings of fullness when dieting

                                        
                    
           
         

            

                
                    
                         2021 NextGen. All Rights Reserved
                    
                    
                        
                            Privacy
                            Terms
                            Feedback

Content is not sized correctly for the viewport

Answers (1)

Related Questions