html - Weird footer style -

i'm using this style admin panel. when make big form register page, footer looks weird. here looks like. i'm beginner css hope can me how make right. footer supposed login, here. didn't change standard css. here's code:

<div class="login-overlay">     <div class="logo">         log ip <br> <span class="smaller">test</span>     </div>     <div class="form-container shadow">         <div class="icon">             @yield('icon')             <div class="header">                 @yield('name')             </div>         </div>         <div class="inputs">             @yield('login-content')                                  </div>     </div> </div> <footer class="mdl-mini-footer login-footer">         <div class="mdl-mini-footer__left-section">                 <div class="mdl-logo">&copy;material dashboard theme</div>             </ul>         </div>         <div class="mdl-mini-footer__right-section">                 <div class="mdl-logo">terms , conditions apply</div>             </ul>         </div> </footer> 

when inspect footer, says:

.login-footer { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 30px; background-color: white; box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.1); } 

it says more css guess important part. best way fix this?

your question unclear me, if problem think footer tall, should try css max-width property this:

.footer {   max-width:120px; } 

if want footer sticks bottom should check out ryan fait's css sticky footer. code simple , force footer stay @ bottom.

you wrap footer in .wrapper , use css code:

* {     margin: 0; } html, body {     height: 100%; } .wrapper {     min-height: 100%;     height: auto !important; /* line , next line not necessary unless need ie6 support */     height: 100%;     margin: 0 auto -155px; /* bottom margin negative value of footer's height */ } .footer, .push {     height: 155px; /* .push must same height .footer */ } 

no matter problem is, should rid of </ul>-elements people commented.