'Mobile chrome is not loading css

It just doesn't show any CSS at all. It worked on all the desktop browsers but when it came to testing it on mobile chrome, it didn't display any CSS. I rechecked if I messed up linking the CSS file or if I forgot to put the meta viewport tag but I didn't forget any. I even checked it on a different mobile browser and the other browser displayed CSS. Sorry if there are any mistakes, I'm still new

/*Css reset*/
*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}
/*Css reset*/

/*Nav*/
.nav{
    background-color: #222222;
    margin-bottom:10em ;
}
.logo{
    width:98px;
    float:left;
    
}
ul{
    list-style-type: none;
}
ul li{
    display: inline;
}
li a{
    color:#ffffff;
    text-decoration: none;
    text-align: center;
    padding:38px 50px;
    display: inline-block;
}
.with-margin{
    margin-left: 30%;
}
/*Nav*/

/*Content*/
body{
    background-color: #000000;
    color:#ffffff
}
main{
    margin-left: 5em;
}
.item-container{
    display: inline-block;
    width: fit-content;
    margin-right: 4em;
    margin-bottom: 3em;
    background-color: #ffffff;
    color: #000000;
    padding: .5em 0;
    border-radius: 3%;
}
.item-container img{
    width: 200px;
    height: 200px;
}
.item-container:hover{
    transform: scale(1.1);
    transition-duration: .2s;
}
.inactive a:hover{
    background-color: #313131;
}
.active a{
    border-bottom:white 4px solid;
    background-color: #313131;
}
.up{
    color: #000000;
    font-size: 2.5em;
    background-color: #ffffff;
    bottom:20px;
    left:10px;
    position: fixed;
    width: 1em;
    text-align: center;
}
/*Content*/

/*Responsive Properties*/
@media only screen and (max-width: 800px){
   /*universal*/
    .logo{
        width: 56.2px;
    }
    .nav{
        margin-bottom: 5em;
    }
    ul{
        margin-left:1em;
        margin-right: none;

    }
    .with-margin{
        margin-left: 5%;
    }
    li a{
        padding:17.3px;
    }
    /*universal*/

    main{
        margin-left: 3.9em;
    }
    .item-container{
        margin-right:1em ;
        margin-left: .4em;
        margin-bottom:1.5em ;
    }
    .item-container img{
        width:104px;
        height: 100px;
    }
    .up{
        position:fixed;
    }

}

/*Responsive Properties*/
<!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>Lace it</title>
    <link rel="icon" href="../Images/Logo.png" type="image/x-icon" />
    <link rel="stylesheet" href="../Css/home-style.css" />
    <script
      src="https://kit.fontawesome.com/38430b5b0d.js"
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <nav class="nav">
      <a href="#"><img src="https://dummyimage.com/420x320/ff7f7f/333333.png&text=Sample" alt="" class="logo" /></a>

      <ul>
        <li class="nav-links with-margin active"><a href="#">Home</a></li>
        <li class="nav-links inactive"><a href="#">Blog</a></li>
        <li class="nav-links inactive"><a href="#">About</a></li>
      </ul>
    </nav>

    <main id="content">
      <!--Item 1-->
      <a href="">
        <section class="item-container">
          <img
            src="https://dummyimage.com/420x320/ff7f7f/333333.png&text=Sample"
            alt=""
          />
          <h4>Brand</h4>
          <p>Price</p>
        </section></a
      >

      <!--Item 2-->
      <a href="">
        <section class="item-container">
          <img
            src="https://dummyimage.com/420x320/ff7f7f/333333.png&text=Sample"
            alt=""
          />
          <h4>Brand</h4>
          <p>Price</p>
        </section></a
      >

      <!--Item 3-->
      <a href="">
        <section class="item-container">
          <img
            src="https://dummyimage.com/420x320/ff7f7f/333333.png&text=Sample"
            alt=""
          />
          <h4>Brand</h4>
          <p>Price</p>
        </section></a
      >

      <!--Item 4-->
      <a href="">
        <section class="item-container">
          <img
            src="https://dummyimage.com/420x320/ff7f7f/333333.png&text=Sample"
            alt=""
          />
          <h4>Brand</h4>
          <p>Price</p>
        </section></a
      >

      <!--Item 5-->
      <a href="">
        <section class="item-container">
          <img
            src="https://dummyimage.com/420x320/ff7f7f/333333.png&text=Sample"
            alt=""
          />
          <h4>Brand</h4>
          <p>Price</p>
        </section></a
      >

      <!--Item 6-->
      <a href="">
        <section class="item-container">
          <img
            src="https://dummyimage.com/420x320/ff7f7f/333333.png&text=Sample"
            alt=""
          />
          <h4>Brand</h4>
          <p>Price</p>
        </section></a
      >

      <!--Item 7-->
      <a href="">
        <section class="item-container">
          <img
            src="https://dummyimage.com/420x320/ff7f7f/333333.png&text=Sample"
            alt=""
          />
          <h4>Brand</h4>
          <p>Price</p>
        </section></a
      >

      <!--Item 8-->
      <a href="">
        <section class="item-container">
          <img
            src="https://dummyimage.com/420x320/ff7f7f/333333.png&text=Sample"
            alt=""
          />
          <h4>Brand</h4>
          <p>Price</p>
        </section></a
      >

      <!--Item 9-->
      <a href="">
        <section class="item-container">
          <img
            src="https://dummyimage.com/420x320/ff7f7f/333333.png&text=Sample"
            alt=""
          />
          <h4>Brand</h4>
          <p>Price</p>
        </section></a
      >

      <!--Item 10-->
      <a href="">
        <section class="item-container">
          <img
            src="https://dummyimage.com/420x320/ff7f7f/333333.png&text=Sample"
            alt=""
          />
          <h4>Brand</h4>
          <p>Price</p>
        </section></a
      >
      <!--Item 11-->
      <a href="">
        <section class="item-container">
          <img
            src="https://dummyimage.com/420x320/ff7f7f/333333.png&text=Sample"
            alt=""
          />
          <h4>Brand</h4>
          <p>Price</p>
        </section></a
      >

      <!--Item 12-->
      <a href="">
        <section class="item-container">
          <img
            src="https://dummyimage.com/420x320/ff7f7f/333333.png&text=Sample"
            alt=""
          />
          <h4>Brand</h4>
          <p>Price</p>
        </section></a
      >

      <!--Item 13-->
      <a href="">
        <section class="item-container">
          <img
            src="https://dummyimage.com/420x320/ff7f7f/333333.png&text=Sample"
            alt=""
          />
          <h4>Brand</h4>
          <p>Price</p>
        </section></a
      >

      <!--Item 14-->
      <a href="">
        <section class="item-container">
          <img
            src="https://dummyimage.com/420x320/ff7f7f/333333.png&text=Sample"
            alt=""
          />
          <h4>Brand</h4>
          <p>Price</p>
        </section></a
      >

      <!--Item 15-->
      <a href="">
        <section class="item-container">
          <img
            src="https://dummyimage.com/420x320/ff7f7f/333333.png&text=Sample"
            alt=""
          />
          <h4>Brand</h4>
          <p>Price</p>
        </section></a
      >

      <!--Item 16-->
      <a href="">
        <section class="item-container">
          <img
            src="https://dummyimage.com/420x320/ff7f7f/333333.png&text=Sample"
            alt=""
          />
          <h4>Brand</h4>
          <p>Price</p>
        </section></a
      >

      <!--Item 17-->
      <a href="">
        <section class="item-container">
          <img
            src="https://dummyimage.com/420x320/ff7f7f/333333.png&text=Sample"
            alt=""
          />
          <h4>Brand</h4>
          <p>Price</p>
        </section></a
      >

      <!--Item 18-->
      <a href="">
        <section class="item-container">
          <img
            src="https://dummyimage.com/420x320/ff7f7f/333333.png&text=Sample"
            alt=""
          />
          <h4>Brand</h4>
          <p>Price</p>
        </section></a
      >

      <!--Item 19-->
      <a href="">
        <section class="item-container">
          <img
            src="https://dummyimage.com/420x320/ff7f7f/333333.png&text=Sample"
            alt=""
          />
          <h4>Brand</h4>
          <p>Price</p>
        </section></a
      >

      <!--Item 20-->
      <a href="">
        <section class="item-container">
          <img
            src="https://dummyimage.com/420x320/ff7f7f/333333.png&text=Sample"
            alt=""
          />
          <h4>Brand</h4>
          <p>Price</p>
        </section></a
      >

      <!--Item 21-->
      <a href="">
        <section class="item-container">
          <img
            src="https://dummyimage.com/420x320/ff7f7f/333333.png&text=Sample"
            alt=""
          />
          <h4>Brand</h4>
          <p>Price</p>
        </section></a
      >

      <!--Item 22-->
      <a href="">
        <section class="item-container">
          <img
            src="https://dummyimage.com/420x320/ff7f7f/333333.png&text=Sample"
            alt=""
          />
          <h4>Brand</h4>
          <p>Price</p>
        </section></a
      >

      <!--Item 23-->
      <a href="">
        <section class="item-container">
          <img
            src="https://dummyimage.com/420x320/ff7f7f/333333.png&text=Sample"
            alt=""
          />
          <h4>Brand</h4>
          <p>Price</p>
        </section></a
      >

      <!--Item 24-->
      <a href="">
        <section class="item-container">
          <img
            src="https://dummyimage.com/420x320/ff7f7f/333333.png&text=Sample"
            alt=""
          />
          <h4>Brand</h4>
          <p>Price</p>
        </section></a
      >

      <!--Item 25-->
      <a href="">
        <section class="item-container">
          <img
            src="https://dummyimage.com/420x320/ff7f7f/333333.png&text=Sample"
            alt=""
          />
          <h4>Brand</h4>
          <p>Price</p>
        </section></a
      >

      <!--Item 26-->
      <a href="">
        <section class="item-container">
          <img
            src="https://dummyimage.com/420x320/ff7f7f/333333.png&text=Sample"
            alt=""
          />
          <h4>Brand</h4>
          <p>Price</p>
        </section></a
      >

      <!--Item 27-->
      <a href="">
        <section class="item-container">
          <img
            src="https://dummyimage.com/420x320/ff7f7f/333333.png&text=Sample"
            alt=""
          />
          <h4>Brand</h4>
          <p>Price</p>
        </section></a
      >

      <!--Item 28-->
      <a href="">
        <section class="item-container">
          <img
            src="https://dummyimage.com/420x320/ff7f7f/333333.png&text=Sample"
            alt=""
          />
          <h4>Brand</h4>
          <p>Price</p>
        </section></a
      >

      <!--Item 29-->
      <a href="">
        <section class="item-container">
          <img
            src="https://dummyimage.com/420x320/ff7f7f/333333.png&text=Sample"
            alt=""
          />
          <h4>Brand</h4>
          <p>Price</p>
        </section></a
      >

      <!--Item 30-->
      <a href="">
        <section class="item-container">
          <img
            src="https://dummyimage.com/420x320/ff7f7f/333333.png&text=Sample"
            alt=""
          />
          <h4>Brand</h4>
          <p>Price</p>
        </section></a
      >
      <!--Item 31-->
      <a href="">
        <section class="item-container">
          <img
            src="https://dummyimage.com/420x320/ff7f7f/333333.png&text=Sample"
            alt=""
          />
          <h4>Brand</h4>
          <p>Price</p>
        </section></a
      >

      <!--Item 32-->
      <a href="">
        <section class="item-container">
          <img
            src="https://dummyimage.com/420x320/ff7f7f/333333.png&text=Sample"
            alt=""
          />
          <h4>Brand</h4>
          <p>Price</p>
        </section></a
      >

      <!--Item 33-->
      <a href="">
        <section class="item-container">
          <img
            src="https://dummyimage.com/420x320/ff7f7f/333333.png&text=Sample"
            alt=""
          />
          <h4>Brand</h4>
          <p>Price</p>
        </section></a
      >

      <!--Item 34-->
      <a href="">
        <section class="item-container">
          <img
            src="https://dummyimage.com/420x320/ff7f7f/333333.png&text=Sample"
            alt=""
          />
          <h4>Brand</h4>
          <p>Price</p>
        </section></a
      >

      <!--Item 35-->
      <a href="">
        <section class="item-container">
          <img
            src="https://dummyimage.com/420x320/ff7f7f/333333.png&text=Sample"
            alt=""
          />
          <h4>Brand</h4>
          <p>Price</p>
        </section></a
      >

      <!--Item 36-->
      <a href="">
        <section class="item-container">
          <img
            src="https://dummyimage.com/420x320/ff7f7f/333333.png&text=Sample"
            alt=""
          />
          <h4>Brand</h4>
          <p>Price</p>
        </section></a
      >

      <!--Item 37-->
      <a href="">
        <section class="item-container">
          <img
            src="https://dummyimage.com/420x320/ff7f7f/333333.png&text=Sample"
            alt=""
          />
          <h4>Brand</h4>
          <p>Price</p>
        </section></a
      >

      <!--Item 38-->
      <a href="">
        <section class="item-container">
          <img
            src="https://dummyimage.com/420x320/ff7f7f/333333.png&text=Sample"
            alt=""
          />
          <h4>Brand</h4>
          <p>Price</p>
        </section></a
      >

      <!--Item 39-->
      <a href="">
        <section class="item-container">
          <img
            src="https://dummyimage.com/420x320/ff7f7f/333333.png&text=Sample"
            alt=""
          />
          <h4>Brand</h4>
          <p>Price</p>
        </section></a
      >

      <!--Item 40-->
      <a href="">
        <section class="item-container">
          <img
            src="https://dummyimage.com/420x320/ff7f7f/333333.png&text=Sample"
            alt=""
          />
          <h4>Brand</h4>
          <p>Price</p>
        </section></a
      >

      <!--Item 41-->
      <a href="">
        <section class="item-container">
          <img
            src="https://dummyimage.com/420x320/ff7f7f/333333.png&text=Sample"
            alt=""
          />
          <h4>Brand</h4>
          <p>Price</p>
        </section></a
      >

      <!--Item 42-->
      <a href="">
        <section class="item-container">
          <img
            src="https://dummyimage.com/420x320/ff7f7f/333333.png&text=Sample"
            alt=""
          />
          <h4>Brand</h4>
          <p>Price</p>
        </section></a
      >

      <!--Item 43-->
      <a href="">
        <section class="item-container">
          <img
            src="https://dummyimage.com/420x320/ff7f7f/333333.png&text=Sample"
            alt=""
          />
          <h4>Brand</h4>
          <p>Price</p>
        </section></a
      >

      <!--Item 44-->
      <a href="">
        <section class="item-container">
          <img
            src="https://dummyimage.com/420x320/ff7f7f/333333.png&text=Sample"
            alt=""
          />
          <h4>Brand</h4>
          <p>Price</p>
        </section></a
      >

      <!--Item 45-->
      <a href="">
        <section class="item-container">
          <img
            src="https://dummyimage.com/420x320/ff7f7f/333333.png&text=Sample"
            alt=""
          />
          <h4>Brand</h4>
          <p>Price</p>
        </section></a
      >

      <!--Item 46-->
      <a href="">
        <section class="item-container">
          <img
            src="https://dummyimage.com/420x320/ff7f7f/333333.png&text=Sample"
            alt=""
          />
          <h4>Brand</h4>
          <p>Price</p>
        </section></a
      >

      <!--Item 47-->
      <a href="">
        <section class="item-container">
          <img
            src="https://dummyimage.com/420x320/ff7f7f/333333.png&text=Sample"
            alt=""
          />
          <h4>Brand</h4>
          <p>Price</p>
        </section></a
      >

      <!--Item 48-->
      <a href="">
        <section class="item-container">
          <img
            src="https://dummyimage.com/420x320/ff7f7f/333333.png&text=Sample"
            alt=""
          />
          <h4>Brand</h4>
          <p>Price</p>
        </section></a
      >

      <!--Item 49-->
      <a href="">
        <section class="item-container">
          <img
            src="https://dummyimage.com/420x320/ff7f7f/333333.png&text=Sample"
            alt=""
          />
          <h4>Brand</h4>
          <p>Price</p>
        </section></a
      >

      <!--Item 50-->
      <a href="">
        <section class="item-container">
          <img
            src="https://dummyimage.com/420x320/ff7f7f/333333.png&text=Sample"
            alt=""
          />
          <h4>Brand</h4>
          <p>Price</p>
        </section></a
      >
      <a href="#"><i class="fa-solid fa-up-long up"></i></i></a>
    </main>
  </body>
</html>
htmlcss


Solution 1:[1]

are you transferring files for testing ? Well! that's not gonna work use some hosting services like gihub.io or netlify.app

Solution 2:[2]

Chrome tends to cache old css for a while, try clearing the cache on the mobile chrome you're using and see if that helps

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Gopal Lohar
Solution 2 N80

Related Questions