Cordova, it’s not Responsive

Asked

Viewed 27 times

0

I’m learning Christ here and I’m having some questions and problems I’ll quote below..

Doubts: How do I put everything Responsive with Materialize? How to implement SQL later?

Problems: He’s not Responsive, I switch from Iphone to Tablet and things get out of order.

Follows 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; }

soon {

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; }

btnCard {

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>
  <script type="text/javascript" src="js/materialize.min.js"></script>
</body>   </html>
apache-cordova

  • I think you need a css framework, e.g.: Bootstrap

  • @Vitornascimento I’m using the Materealize...

No answers

Browser other questions tagged apache-cordova

You are not signed in. Login or sign up in order to post.