HTML Layout Ratio

Navigation
1

I'm starting a project using the materialize css library, I'm not very knowledgeable about layouts , I'm having difficulty with the proportion of HTML elements. In the% w / w of% below, it is expected to:

However,whenyouopenthesiteinlayoutminor(layout),theelementsonthescreenareverysmall:

IwouldlikethefieldstotakeonalargerproportionwhenIaccessthesitethroughsomemobileless.

CodeIhavesofar:

index.html

<!DOCTYPEhtml><html><head><metacharset="utf-8">
        <title></title>
        <link href="fonts/google.fonts.css" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="css/materialize.min.css">
        <link rel="stylesheet" type="text/css" href="css/custom.css">
    </head>
    <body class="yellow darken-2">
        <div class="container login-container">
            <div class="row">
                <form class="col s4 offset-s4 login-form">

                  <div class="row col s2 offset-s2">
                     <img class="img-logo" src="img/logo2.png">
                  </div>

                  <div class="row">
                    <div class="input-field col s12">
                      <input id="email" type="email" class="validate">
                      <label for="email">Email</label>
                    </div>
                  </div>

                  <div class="row">
                    <div class="input-field col s12">
                      <input id="password" type="password" class="validate">
                      <label for="password">Senha</label>
                    </div>
                  </div>

                  <div class="row">
                    <div class="input-field col s12">
                        <button class="btn waves-effect waves-light" type="button" name="action">Entrar
                            <i class="material-icons right">send</i>
                        </button>
                    </div>
                  </div>

                </form>
            </div>
        </div>
    </body>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/materialize.min.js"></script>
</html>

custom.css 

.login-container {
    margin-top: 10%;
}

.img-logo {
    width: 150px;
    height: 150px;
}
    
asked by anonymous 18.05.2017 / 18:42

1 answer

1

Add the following tag in the header of your html code to control layout in mobile browsers. 

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

Learn more about viewport

    
18.05.2017 / 18:46
How does this recursive function (factorial function) in Python behave? Adding Datatable Features in Laravel 5.4 with AdminLTE