Original css styling is overriding my media query and vise versa

125
March 03, 2022, at 07:30 AM

My media query which i set for (max-width 915px) changes the height of the css which i created for desktop even though the query comes after the original css, and when i change something in the original css, it reflects on the media query even though the values are different and should be overwritten. please check the "form element" which created and try tinker the top and left positioning properties in the original part of css

body{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.content {
    width: 1400px;
    margin: auto;
 
    padding: 10px;
}
p {
    color: rgb(97, 87, 226);
}
p.foots {
    color:black ;
    
}
.para2 {
    color: black;
}
.logo {
    width: 100%;
    height: 300px;
    background-color: rgb(147, 235, 238);
}
div.navi {
    
    background-color: rgb(228, 226, 217);
    width: 100%;
    height: 50px;
    margin-top: 15px;
    text-align: center;
    font-size: 20px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    padding-top: 1px;
    margin-bottom: 1px;
}
p.nav {
    position: relative;
    bottom: 5px;
    border-style: solid;
}

a:link {
    text-decoration: none;
    color: rgb(97, 87, 226);
}
.navi3:link {
    color: rgb(7, 7, 7);
}
.logo-top {
    margin-left: 20px;
    width: 600px;
}
/* inner body styling */

div.inner-body {
    background-image: url(image/bk.png); 
    margin-bottom: 20px;
    border-style: solid;
    margin-top: 20px;
    height: 1800px;
  position: relative;
}
.header {
    
    width: 700px;
    position: relative;
    left: 338px;
    font-size: 30px;
    top:100px;
    
}
.para {
    
    width: 800px;
    position: relative;
    left:345px;
    top:200px;
    background-color: rgb(206, 200, 180);
    font-size: 25px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    border-radius: 20px;
    padding: 5px;
}
form {
    padding: 20px;
    border-radius: 20px;
    width: 725px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    position: relative;
    left:350px;
    top:225px;
    background-color: rgb(206, 200, 180);
}
.field {
    width: 300px;
    font-size: 18px;
    
}
.field2 {
    width: 600px;
    font-size: 18px;
}
.field3 {
    width: 300px;
    height: 30px;
    border-radius: 10px;
    margin-top: 10px;
    background-color: rgb(193, 211, 205);
    
    cursor: pointer;
}
.field4 {
    width: 300px;
    font-size: 18px;
    cursor: pointer;
}
.error {
    color: red;
    font-size: 15px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.error1 {
    color: red;
    font-size: 15px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.navi2 {
    
    width: fit-content;
    width: 300px;
    height: 600px;
    position:absolute;
    
    background-color: cadetblue;
    font-size: 20px;
    border-radius: 20px;
    top:228px;
}
.user-links {
    position: relative;
    left:20px;
    bottom:30px;
}
.user-links:link{
    color: brown;
}
.userlogo {
    width: 200px;
    border-radius: 100px;
    position: relative;
    left: 50px;
    bottom: 100px;
}





/* footer styling */
.emaillogo, .telelogo {
    width: 20px;
}
footer{
    background-color: rgb(126, 226, 230);
    height: 200px;
}
.footimage {
    width: 400px;
    
    margin: 0;
}
div.contact{
    width: fit-content;
    height: 200px;
    
    position: relative;
    left: 400px;
    bottom: 185px;
    font-size: 12px;
}
.usefullinks {
    width: fit-content;
    font-size: 12px;
    position: relative;
    left:750px;
    bottom:400px;
}
.connect {
    width: fit-content;
    position: relative;
    left: 1100px ;
    bottom: 524px;
    font-size: 12px;
}
.fb, .tw, .yt, .ln {
    width: 50px;
    border-radius: 10px;
    
}
/* Media Queries */
@media screen and (max-width:915px) {

    div.logo {
        width: 900px;
        height: 400px;
        background-color: rgb(147, 235, 238);
        -ms-flex-item-align: center;
    }
    .logo-top {
        width: 800px;
    }
    .content {
        width: 100%;
       height: 100vh;
        padding: 0;
    }

    .inner-body {
        background-image: url(image/book2.png);
        height: 1800px;
        border-style: solid;
        margin-top: 15px;
        margin-bottom: 15px;
        width: 900px;
        position: relative;
      
    }
    div.navi {
        width: 900px;
        font-size: 28px;
        padding-bottom: 90px;
    }
    .header {
        left: 50px;
    }
    .para {
        width: 680px;
        display: block;
        left: 80px;
        font-size: 35px;
        padding: 30px;
        top: 10px;
        align-items: center;
    }
    form {
        width: 700px;
        left: 80px;
        font-size: 30px;
        border-style: solid;
        
    }
    .field {
        width: 400px;
        font-size: 30px;
    }
    
    .field2 {
        width: 600px;
        font-size: 30px;
    }
    .field3 {
        width: 300px;
        height: 30px;
        border-radius: 10px;
        margin-top: 10px;
        background-color: rgb(193, 211, 205);
        font-size: 25px;
        cursor: pointer;
    }
    
    .field4 {
        width: 300px;
        font-size: 30px;
        cursor: pointer;
    }
    .navi2 {
        display: none;
    }
    footer {
        display: none;
       
        padding: 0;
        list-style: none;
        background-color: rgb(126, 226, 230);
        font-size: 20px;
      }
      .contact {
          display: none;
      }
      .connect {
          display: none;
      }
      .usefullinks{
          display: none;
        
      }
    

      .footimage {
          width: 300px;
      }

      .error {
        color: red;
        font-size: 20px;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
    }
    
    .error1 {
        color: red;
        font-size: 20px;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
    }
   
  }
@media screen and (max-width:415px) {

    div.logo {
        width: 920px;
        height: 400px;
        background-color: rgb(147, 235, 238);
        -ms-flex-item-align: center;
    }
    .logo-top {
        width: 800px;
    }
    .content {
        width: 100%;
       height: 100vh;
        padding: 0;
    }

    .inner-body {
        background-image: url(image/book2.png);
        height: 100%;
        border-style: solid;
        margin-top: 15px;
        margin-bottom: 15px;
        width: 920px;
        position: relative;
        align-items:center;
    }
    div.navi {
        width: 920px;
        font-size: 28px;
        padding-bottom: 90px;
    }
    .header {
        left: 50px;
    }
    .para {
        width: 680px;
        display: block;
        left: 80px;
        font-size: 35px;
        padding: 30px;
        top: 10px;
        align-items: center;
    }
    form {
        width: 700px;
        left: 80px;
        font-size: 30px;
        border-style: solid;
        
    }
    .field {
        width: 400px;
        font-size: 30px;
    }
    
    .field2 {
        width: 600px;
        font-size: 30px;
    }
    .field3 {
        width: 300px;
        height: 30px;
        border-radius: 10px;
        margin-top: 10px;
        background-color: rgb(193, 211, 205);
        font-size: 25px;
        cursor: pointer;
    }
    
    .field4 {
        width: 300px;
        font-size: 30px;
        cursor: pointer;
    }
    .navi2 {
        display: none;
    }
    footer {
        display: none;
       
        padding: 0;
        list-style: none;
        background-color: rgb(126, 226, 230);
        font-size: 20px;
      }
      .contact {
          display: none;
      }
      .connect {
          display: none;
      }
      .usefullinks{
          display: none;
        
      }
    

      .footimage {
          width: 300px;
      }
      .error {
        color: red;
        font-size: 20px;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
    }
    
    .error1 {
        color: red;
        font-size: 20px;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
    }
   
  }
<!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">
    <link rel="stylesheet" href="log-it-reports2.css">
    <script src="log-it-reports.js"></script>
    <title>Document</title>
</head>
<body>
    <div class= "content">
        <div class="logo">
        <img class="logo-top" src="image/logo1.png" alt="Logo Top: WearviewAcademy Logo" >
        </div>
        <div class="navi">
            <nav>
            <p class> 
                <a href="homepage.html" title=" Home Page"> Home</a> |
                <a href="academics.html" title=" Academics Page">Academics</a> |
                <a href="services.html" title=" Services">Services</a> |
                <a href="covid-19.html" title=" Covid-19 Page">Covid-19</a> | 
                <a href="students&parents.html" title=" Students&Parents Page">Students & Parents</a> |
                <a href="Transcripts.html" title="Transcripts Page">Transcripts</a>  |
                <a href="staff.html" title="Staff Page">Staff</a> |
                <a href="career.html" title="Career Available">Career</a> |
                <a href="events" title="Events Page">Events</a> | 
                <a href="studentaccount.html" title="Student Account">Student Account</a> |
        </p>
    </nav>
        </div>
       <div class="inner-body">
           <div class = "header" >
            <h1>Steps For IT-Issues Logging:</h1>
           </div>
       
       <div class="para">
           <p class="para2">Please read the following instructions before submitting a report:</p> 
           <ol>
               <li>Fill out all of the fields.</li>
               <li>Use a valid email.</li>
               <li>Select a problem type.</li>
               <li>Be as detailed as possible so that the IT staff could address the issue properly (100 characters minumum).</li>
               <li>Normally most issues get addressed within 2 hours, please be patient.</li>
           </ol>
       </div>
       <div class="form1">
        <form  method="GET" onsubmit=" return formValidations() " action="log-it-reports.html">
          <div class="error1" id= "errorMsg"></div>
          <div>
          <label for="subject"><b>Subject:</label> 
          <input  class="field" id="subject" type="text" placeholder="Subject Title"  > 
          </div><br>
          <div class="error" id= "errorMsg2"></div>
          <div>
          <label for="email"><b>Email:</label> 
          <input class="field" id="email" type="email" placeholder="staff@wearview.com">  
          </div><br>
          <div class="error" id= "errorMsg3"></div>
          <div>
            <select class="field4" name="techtype" id="problemtypes">
                <option value="">Problem Type</option>
                <option value="Hardware">Hardware</option>
                <option value="Software">Software</option>
                <option value="Other">Other</option>
              </select>
          </div><br>
          <div class="error" id= "errorMsg4"></div>
          <div>
          <textarea class="field2" id="description" placeholder="Description goes here" name="descript" rows="15" cols="90"></textarea>
          </div>          
          
          <div>
            <button class="field3" type="submit" class="btn">Submit</button>
            <input type="checkbox" id="notify" name="notify" value="">
            <label for="notify">Inform me by email when issue is resolved.</label> 
        </div>
        </form>
       </div>
       <div class="navi2">
           <div class="userimage">
               <img class="userlogo" src="image/userlogo.png" alt="Picture- User Profile picture">
           </div>
           <div class="user-links">
               <navi class="navi3">
                <a class="navi3" href="staffname.html" title=" Staff Name">Staff Name</a> <br><br>
                <a class="navi3"href="inbox.html" title=" User Inbox">Inbox</a> <br><br>
                <a class="navi3" href="notifications.html" title="Notifications">Notifications</a> <br><br>
                <a class="navi3" href="files.html" title="Files">Files</a> <br><br>
                <a class="navi3" href="settings.html" title="Settings">Settings</a> <br><br>
                <a class="navi3"href="help.html" title="Help">Help</a>  <br><br>
                <a class="navi3"href="qr-for-mobile.html" title="QR for Mobile">QR For Mobile</a> <br><br>
                <a class="navi3"href="logout.html" title="Log Out">Log Out</a> 
               </navi>
           </div>
       </div>
    </div>
       <div class="foot">
           <footer id = "footy">
           <div>
            <img class="footimage" src="image/logo1.png" alt="bottom logo- Wearview Academy"  width="400px">
           </div>
           <div class="contact">
               <h3>Contact Us</h3>
                <p class="foots"><img class="emaillogo" src="image/email (2).png" alt="logo-email"> :wearview_academy@wearview.com</p>
              <p class="foots"><img class="telelogo" src="image/tele.png" alt="logo-telephone"> :+2499100000000</p>
           </div>
           <div class="usefullinks">
            <h3>Useful Links</h3>
            <ul>
                <li><a href="career.html" title=" Jobs Available">Career</a></li> 
                <li><a href="websiteerror.html" title=" Report A Website Issue">Report A Website Issue</a></li> 
                <li><a href="aboutus.html" title="About Us">About Us</a></li>
                <li><a href="covid-19.html" title="Covid-19">Covid-19</a></li>
                <li><a href="events" title=" FAQs Page">Events</a></li>
            </ul>  
           </div>
           <div class="connect">
            <h3>Connect With Us </h3><br>
                <a href="https://www.facebook.com" title= "facebook"><img class="fb" src="image/fb.png" alt = "logo-social media-Facebook" /></a>     
                <a href="https://www.twitter.com" title= "twitter"><img class="tw" src="image/tw.jpg" alt = "logo-social media -Twitter" /></a>      
                <a href="https://www.youtube.com" title= "youtube"><img class="yt" src="image/you.png" alt = "logo-social media-Youtube" /></a>      
                <a href="https://www.linkedin.com" title= "linkedin"><img class="ln" src="image/linkd.png" alt = "logo-social-media-LinkedIn" /></a>     
           </div>
           </footer>
       </div>
    </div>
</body>
</html>

, you would notice it takes effect on the media query as well.

Answer 1

Have you tried using the !important rule to the properties?

Like:

div.logo {
        width: 900px!important;
        height: 400px!important;
        background-color: rgb(147, 235, 238);
        -ms-flex-item-align: center;
    }

Also try to look more into @MediaQueries

Rent Charter Buses Company
READ ALSO
change color using JavaScript (DOM)

change color using JavaScript (DOM)

I stored a hex-color value in string as well as a number and pass the variable as a value for css propertyWhy this code not work can you explain me

146
CSS Flex item spanning two rows without fixed height

CSS Flex item spanning two rows without fixed height

I am trying to create a flex container layout whereby one of the flex items should span two rowsSee image below for a better explanation:

170
create a notification/alert at a specific time html css angular

create a notification/alert at a specific time html css angular

i created a notification box that it shows me an alert when i create a notification from the date which i create this notification

109