what makes the login form of a particular width in flat ui template

Question

I'm trying my hands with Flat UI. So I'm going through their site to understand how their page uses flat ui. Here I'm not able to trace the width of the login form. Anybody knows how the width of the login form is that much? here is the link

Answer 1

The width of the login-form is controlled by padding applied to its parent login-screen container.

The original padding for the .login-screen class is 123px 199px 33px 306px. If you change it to something like 123px 33px 33px 306px, you'll see that box grow horizontally to the right.

Likewise, if you change the left padding value, the box will grow horizontally to the left. Of course, it will also cover up the "Welcome" icon, so you'll need to reposition that, too. Its position is set to absolute, governed by pixel values specified for the left and top properties.

Do note that a browser-based CSS inspector is extremely useful for figuring things like this out. All major browsers that I'm aware of include such utilities out-of-the-box. Just play around with the styles until you get the effect you want, then go back and figure out what you just did using your knowledge of CSS.