Ausblenden für Desktop-Anzeige für mobile CSS

Question

Ich versuche, separate Seite für mobile Ansicht zu erstellen, sollte es für Desktop versteckt sein siehe meine CSS und HTML Was ist falsch in diesem Code?

Code:

<form class="form-signin-login" method="post" id="login-form"> 
        <input type="text" name="user_entered_id" id="user_entered_id" value="Email (or) Phone No" onblur="if(this.value=='') this.value='Email (or) Phone No'" onfocus="if(this.value =='Email (or) Phone No') this.value=''"> 
        <input type="password" name="lgpassword" id="lgpassword" value="Password" onblur="if(this.value=='') this.value='Password'" onfocus="if(this.value =='Password') this.value=''"> 
        <input type="submit" class="button" name="submit" value="Login"> 
      </form> 

<style> 

body{ 
background-color:#000;} 
    @media screen and (max-width:300px) { 

.input[type=text], .input[type=password]{width: 100%; 
padding: 12px 20px; 
background-color:#000; 
color:#fff; 
outline:none; 
border: none; 
border-bottom: 1px solid #fff; 

margin: 8px 0; 
-webkit-box-shadow: 0 0 0px 1000px black inset; 
-webkit-text-fill-color: white !important; 


    } 
} 

    </style>  

Answer 1

Sie müssen nur die CSS

folgenden in hinzufügen

.form-signin-login { display: none;} @media screen and (max-width:300px) { .form-signin-login { display: inline;} }

Hier wird die Arbeitsprobe: https://jsfiddle.net/6sz8rnb2/1/

Answer 2

@media add min-width und max-width (für mobil und desktop), um die Sichtbarkeit der Eigenschaft zu verbergen (Wert: visible | versteckt | zusammenbrechen | erben |); Hinweis: Alle anderen Elemente auf der Seite ändern ihre Position nicht.