HTML layout ratio

Asked

Viewed 363 times

1

I’m starting a project using the library materialize css, I don’t know much about layouts, I’m struggling with the ratio of the elements of HTML. In the layout next, is with the expected ratio:

Layout

However, when opening the site in a layout minor (mobile), the elements on the screen are very small :

Layout mobile

I would like when accessing the site through some layout smaller, the fields took a larger proportion.

Code I have so far :

index.html

<!DOCTYPE html>
<html>
    <head>
    <meta charset="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;
}
html css materialize

1 answer

1


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

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

Learn more about the viewport

  • Thank you @abfurlan, solved my problem!

Browser other questions tagged html css materialize

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