CODEWITHSUNDEEP
htmlcss
Job Heersema
Job Heersema

Reputation: 66

Why my second css keeps bugging?

I got a standard css, but i want a second css file that will be used whenever the width of my window hits the min-width. Here is my code.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Webblog</title>
  <script type="text/javascript" src="js/javascript.js"></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/style.css"/>
  <link rel="stylesheet" href="css/500.css" media="screen and (min-width: 500px)"/>
</head>
<body onload='setBodyScale()'>

<!-- HTML for the menu -->
<div id="menu_main">
  <div id="menu_logo">
    <img id="menu_img" src="img/logo.png" alt="image not responding">
  </div>
  <div id="menu_item">
    <p id="menu_text">Blog WebDeveloper Aron</p>
    <ul id="menu_button">
      <li class="menu">Home</li>
      <li class="menu">Posts</li>
    </ul>
  </div>
</div>
<!-- End of the menu HTML-->

<div id="posts"></div>

<div id="posts_recent">
  <h1>Inloggen</h1>
  <form method="post" action="index.html">
    <label for="user">Gebruikersnaam:</label>
    <input type="text" name="user" id="users" />
    <label for="pass">Wachtwoord:</label>
    <input type="password" name="pass" id="pass" />
    <input type="submit" value="Inloggen" id="submit" />
  </form>
</div>

</body>
</html>

CSS:

body{
  background-color: green;
  width: 90%;
  margin-left: 5%;
}


/* Style for the menu */
#menu_main{
  height: 8vw;
  background-color: red;
  border: 3px solid black;
}
#menu_img{
  background-color: black;
  position: absolute;
  width: 10%;
  margin-left: 7%;
  padding: 0.5%;
}
#menu_item{
  width: 45%;
  float: right;
  margin-top: 1%;
  margin-right: 4%;
  padding-left: 2%;
  border-left: 2px solid black;
}
#menu_text{
  padding-bottom: 2%;
  font-size: 2vw;
  font-weight: bold;
}
.menu{
  display: inline-block;
  width: 30%;
  border: 2px solid black;
  font-size: 1.5vw;
  font-weight: bold;
  text-align: center;
  padding: 1%;
  background-color: white;
}
.menu:nth-child(2){
  margin-left: 3%;
  margin-right: 3%;
}
.menu:hover{
  background-color: lightgrey;
}
/* End of the menu style */


/* Post div */
#posts{
  position: absolute;
  z-index: -1;
  width: 65%;
  height: 90%;
  margin-top: 3%;
  background-color: blue;
  border: 3px solid black;
}
#posts_recent{
  position: absolute;
  width: 20%;
  height: 90%;
  margin-top: 3%;
  margin-left: 70%;
  background-color: white;
  border: 3px solid black;
}
h1{
  margin-left: 34%;
  margin-top: 3%;
  margin-bottom: 2%;
  font-size: 120%;
  font-weight: bold;
}
form{
  padding: 1%;
  border-bottom: 1px solid black;
}
#pass{
  margin-left: 10%;
  width: 50%;
}
#users{
  width: 50%;
}
#submit{
  margin-left: 37%;
  margin-top: 3%;
  margin-bottom: 2%;
}

CSS 2:

body{
  background-color: black;
  width: 100%;
}

I don't know why it doesn't work, you guys can help me out?

Upvotes: 2

Views: 55

Answers (2)

Sharukh k shaji
Sharukh k shaji

Reputation: 134

Thats because you dont check the condition whether the window size hit the min width. Using the following css you may be able to do that.

Refer how to use media query

Use css2 as

@media (min-width: 480px) {
 body{
    background-color: black !important;
    width: 100% !important; }}

you can put your desired min value in the place of 480px

Upvotes: 2

Govind jha
Govind jha

Reputation: 400

  use this in CSS 2

 -------------- 
body{
  background-color: black !important;
  width: 100% !important;
}

Upvotes: 2

Related Questions