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>