Семантический интерфейс - вход форма заполняет всю страницу

Question

Я проектирование хорошо выглядящий форму входа в мой семантического ш

моя форма заполняется весь экран ноутбука. Как сделать его центрированным. Размер шрифта и размер формы должны увеличиваться в зависимости от размера устройства (в котором я запускаю приложение)

Кто-нибудь, пожалуйста, предложите решение.

Мой HTML-код, как показано ниже.

<div class="ui center aligned grid"> 
    <div class="twelve wide column">   
     <div class="ui container"> 
     <h3>Log-in to your account</h3> 
     </div> 
     <form class="ui form"> 
      <div class="ui stacked secondary segment"> 
       <div class="field"> 
        <div class="ui left icon input"> 
         <i class="user icon"></i> 
         <input type="text" name="email" placeholder="User Name" ng-model="username"> 
        </div> 
       </div> 
       <div class="field"> 
        <div class="ui left icon input"> 
         <i class="lock icon"></i> 
         <input type="password" name="password" placeholder="Password" ng-model="password"> 
        </div> 
       </div> 
       <div class="ui fluid large teal submit button" ng-click="login()">Login</div> 
      </div> 
      <div class="ui error message"></div> 
     </form> 
     <div class="ui message"> 
      New to us? <a href="http://s.codepen.io/voltron2112/debug/PqrEPM?">Register</a> 
     </div> 
    </div> 
</div> 
<style type="text/css"> 
/* Some basic formatting */ 

code { 
    background-color: #E0E0E0; 
    padding: 0.25em 0.3em; 
    font-family: 'Lato'; 
    font-weight: bold; 
} 

.container { 
    padding: 3em 0em; 
} 

img { 
    display: block; 
    max-width: 100%; 
} 

/* Shows content box (not negative margins) */ 

.grid { 
    position: relative; 
    padding : 3em; 
} 

.grid:before { 
    position: absolute; 
    top: 1rem; 
    left: 1rem; 
    background-color: #F0F0F0; 
    content: ''; 
    width: calc(100% - 2rem); 
    height: calc(100% - 2rem); 
    box-shadow: 0px 0px 0px 1px #DDDDDD inset; 
} 

.ui.divided.grid:before, 
.celled.grid:before { 
    display: none; 
} 

.ui.aligned .column:after { 
    display: none !important; 
} 

.grid .column:not(.row):not(.grid):after { 
    background-color: rgba(86, 61, 124, .15); 
    box-shadow: 0px 0px 0px 1px rgba(86, 61, 124, 0.2) inset; 
    content: ""; 
    display: block; 
    min-height: 50px; 
} 

@media only screen and (max-width: 768px) { 
    .stackable.grid:before { 
     width: 100%; 
     left: 0em; 
    } 
} 
</style> 

С уважением, Sabarisri

Answer 1

вам нужно добавить этот стиль

body>.grid { 
    height: 100%; 
    background-color: #DADADA; 
} 

.image { 
    margin-top: -100px; 
} 
.column { 
    max-width: 450px; 
}