HTML, CSS Mobile-Ansicht Ausgabe

Question

Die mobile Ansicht ist, wie nicht, dass auf dem Desktop ist Sie diese zu https://portal2portal.ml in Ihrem mobilen Webbrowser überprüfen auch der Schieber, die ich gemacht habe, ist noch nicht richtig sichtbar in mobilen ich habe versuchte Medienabfrage, um die mobile Ansicht zu reparieren, funktioniert aber nicht. das Problem ist mit 1.Hover Navigationsleiste. 2.Slider.

hoffe, dass jemand mir helfen wird. ----------- CSS --------------------

.body{ 
    font-family:arial,sans-serif; 
    height:auto; 
    width:auto; 
} 


*{ 
    padding: 0px; 
    margin: 0px; 
} 
#secdiv{ 
    opacity:100; 
    filter:(opacity=70;); 
} 
#maindiv ul{ 
    width:100%; 
    height:80px; 
    background:black; 
    line-height:80px; 
    color:white; 
    margin:auto; 
    text-align:center; 
    font-family: "Times New Roman", Times, serif; 
    font-size:50px; 


} 
#secdiv ul a{ 
    text-decoration: none; 
    color: white; 
    padding:15px; 
    text-align:center; 
} 
#secdiv ul li{ 
     list-style-type:none; 
     display:inline-block; 
     float:center; 
     text-align:center; 
    } 
#secdiv ul li:hover{ 
    background:darkred; 
    transition:all 0.40s; 
} 
#secdiv h1{ 
    width:100px; 
    float:left; 
    cursor:pointer; 
    margin-left:29px; 
} 

body{ 
font-family:"Oxygen",sans-serif; 
font-size:16px; 
line-height:1.5; 
} 
.content{ 
position:relative; 
z-index:2; 
margin:13% auto; 
width:50%; 
text-align:center; 

} 
.heading{ 
    font-family: "Times New Roman", Georgia, Serif; 
margin-bottom:24px; 
color:RED; 
font-size:44px; 

} 
.para{ 
margin-bottom:24px; 
color:orange; 
font-size:44px; 
font-family: "Times New Roman", Georgia, Serif; 
} 
.btn{ 
padding:12px 28px; 
color:#ff3c64; 
font-size:22px; 
text-decoration:none; 
border:4px solid #ff3c64;} 
#wrapper { 
    margin:0 auto; 
    width:100%; 
    text-align:center; 
    position:absolute; 
    top:500px; 
} 
#googleimg{ 
    border-radius:50%; 
    width:150px; 
    height:150px; 
    background-image:url("googleimage.jpg"); 
    background-size:cover; 
     box-shadow: 10px 10px 5px #888888; 
} 
#wrapper2 { 
    margin:0 auto; 
    width:100%; 
    text-align:center; 
    position:absolute; 
    top:500px; 
    left:200px; 
} 
#railwayimg{ 
    border-radius:50%; 
    width:150px; 
    height:150px; 
    background-image:url("railwayimg.jpg"); 
    background-size:cover; 
     box-shadow: 10px 10px 5px #888888; 
} 
#wrapper3 { 
    margin:0 auto; 
    width:100%; 
    text-align:center; 
    position:absolute; 
    top:512px; 
    left:400px; 
} 
#govind{ 
    border-radius:50%; 
    width:150px; 
    height:150px; 
    background-image:url("govind.png"); 
    background-size:cover; 
     box-shadow: 10px 10px 5px #888888; 
} 
#contactus 
{ 
font-family:"Times New Roman",Times,serif; 
font-size:35px; 
} 
.container 
{ 
    text-align:center; 
    color:#2c2c2c; 
    text-decoration:none; 
    outline:thick ridge red; 
    height:300px; 
    width:300px; 
    right:400px; 
    margin:auto; 
    background-color:#ffd6cc; 

} 
#mySidenav a { 
    position: absolute; /* Position them relative to the browser window */ 
    left: -80px; /* Position them outside of the screen */ 
    transition: 0.3s; /* Add transition on hover */ 
    padding: 15px; /* 15px padding */ 
    width: 100px; /* Set a specific width */ 
    text-decoration: none; /* Remove underline */ 
    font-size: 20px; /* Increase font size */ 
    color: white; /* White text color */ 
    border-radius: 0 5px 5px 0; /* Rounded corners on the top right and bottom right side */ 
    font-family: "Times New Roman", Times, serif; 
} 

#mySidenav a:hover { 
    left:0; /* On mouse-over, make the elements appear as they should */ 
} 

/* The about link: 20px from the top with a green background */ 
#about { 
    top: 200px; 
    background-color:red ; 
    font-family: "Times New Roman", Times, serif; 
} 

#tools{ 
    top:300px; 
    background-color:blue; /* Blue */ 
    font-family: "Times New Roman", Times, serif; 
} 
#contact { 
    top:400px; 
    background-color:green /* Light Black */ 
} 
h1{ 
    text-align:center; 
    text-shadow:2px 2px 5px red; 
    font-family: "Times New Roman", Times, serif; 
} 


.slider{ 
    width:800px; 
    height:400px; 
    background:url("sliderimage1.PNG"); 
    margin:100px auto; 
    animation:slide 5s infinite; 
    outline:solid; 

} 
@keyframes slide{ 
    25%{ 
     background:url("sliderimage1.png"); 
    } 

    25%{ 
     background:url("sliderimage11.jpg"); 
    } 
} 

<!DOCTYPE html> 
<html> 
<head> 
    <title>Test site</title> 

    <link rel="stylesheet" type="text/css" href="style.css"> 
    <link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="mobilecss.css" /> 
    <link rel="stylesheet" type="text/css" href="slidercss.css"> 
     </head> 
<body background="portal image.jpg"> 
    <div id="maindiv"> 
     <div id="secdiv"> 

        <ul> 
     <li> 
      <li><a href="index.html">HOME</a></li> 
     </ul> 

      </div></div> 
      <center><h3><p>This is a prototype Website the contents you will find here is owned by creaters of this website In below you can see Slider</p></h3></center> 


<!--SLIDER STARTS HERE--> 
<div class="slider"> 

</div> 
<!--SIDEBAR NAVIGATION STARTS HERE--> 

      <div id="mySidenav" class="sidenav"> 
    <a href="#" id="about">ABOUT</a> 
    <a href="#" id="tools">TOOLS</a> 
    <a href="testc.html" id="contact">CONTACT US</a> 
</div> 

    </body> 
</html> 

Answer 1

Ok, zuerst Sie sind fehlendes Darstellungsfeld tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

die Breite = geräte Breite Teil setzt die Breite der Seite, die Bildschirmbreite der Vorrichtung zu folgen (die auf der Vorrichtung variieren abhängig). Der anfängliche Maßstab = 1,0 Teil legt die anfängliche Zoomstufe fest, wenn die Seite zum ersten Mal vom Browser geladen wird.

Sie brauchen das nicht:

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="mobilecss.css" /> 

schreiben Medien-Anfragen innerhalb CSS-Datei.