Cordova, is not responsive

0

I'm learning cordova here and I have some questions and problems that I will quote below ..

Questions: How to put everything responsive with Materialize? How to implement SQL afterwards?

Problems: He is not responsive, I move from Iphone to Tablet and things get out of order.

Follow the code:

index.css

  

main {       / * FOOTER * /       flex: 1 0 auto; }

     

body {       background-image: url ("../ img / bg.png");       / * FOOTER * /       display: flex;       min-height: 100vh;       flex-direction: column; }

     

logo

width: 30%;
margin-top: 2em;
margin-left: 8em; }
     

logo2

width: 20%;
margin-left: 10em;
 }
     

account

margin-top: 2em;
margin-left: 7em; }
     

password {

margin-top: 1em;
margin-left: 7em; }
     

btnLogin {

margin-top: -2em; }
     

btnSign up {

margin-top: 0.2em; }
     

footer-text {

margin-left: 9em; }
     

footer {

margin-top: 2.4em; }

index.html

  

                                                           

  <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>

<body>
    <!-- LOGO -->
    <img class="responsive-img" src="img/logo.png" id="logo">

    <!-- LOGIN/SENHA -->
    <div class="row">
        <form class="col s12">
    <div class="row">
    <div id="account" class="input-field col s6">
        <i class="material-icons prefix">account_circle</i>
        <input id="icon_prefix" type="email" class="validate">
    <label for="icon_prefix">E-mail</label>
    </div>
    <div id="senha" class="input-field col s6">
        <i class="material-icons prefix">https</i>
        <input id="icon_https" type="password" class="validate">
        <label for="icon_https">Senha</label>
    </div>
    </div>
</form>   </div>

     <!-- BOTÕES -->
     <a class="waves-effect waves-light btn" id="btnLogin">LOGIN</a>
     <a class="waves-effect waves-light btn" id="btnCadastrar">CADASTRAR</a>

     <!-- FOOTER -->
    <footer id="footer" class="page-footer">
      <div class="container">
        <div class="row">
          <div class="col l6 s12">
          </div>
          <div class="col l4 offset-l2 s12">
            <ul>
              <li><a id="footer-text" class="grey-text text-lighten-3" href="#!">Conheça o APP</a></li>
            </ul>
             <img class="responsive-img" src="img/logo2.png" id="logo2">
          </div>
        </div>
      </div>
      <div class="footer-copyright">
        <div class="container">
        MIND CODE © 2016 Direitos Autorais de Thiago Saad.
        </div>
      </div>
    </footer>


  <!--Import jQuery before materialize.js-->
  <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script><scripttype="text/javascript" src="js/materialize.min.js"></script>
</body>   </html>
    
asked by anonymous 07.08.2016 / 04:26

0 answers