My login form in Rails 4 with Bootstrap 3 is giving me trouble. It doesn't format well on any device, especially smaller screens where it becomes unusable. I suspect the huge right margin of the rows is to blame, but I can't figure out the root cause.
The form has become needlessly complex in my attempt to make it usable. Once I resolve this issue, I plan to simplify it.
I'm trying to improve my HTML and CSS skills, and I use Firebug for troubleshooting. Any advice on how to handle similar issues in the future would be greatly appreciated.
Here's a view of the form as it should appear:
This shows the div containing the rows:
View of the rows, with the problematic right margin:
Rails view of the form:
<div class="col-md-6">
<h1>Log in</h1>
<%= form_tag sessions_path do %>
<div class="col-md-6">
<div class="field align_right">
<%= label_tag :logon %>
<%= text_field_tag :logon %>
</div>
<div class="break_line"></div>
<div class="field align_right">
<%= label_tag :password %>
<%= password_field_tag :password %>
</div>
<div class="break_line"></div>
<div class="field align_right">
<%= label_tag :remember_me %>
<%= check_box_tag :remember_me, 1, true %>
</div>
<div class="break_line"></div>
<div class="field align_right">
<%= label_tag :change_password %>
<%= check_box_tag :change_password, nil, false %>
</div>
<div class="break_line"></div>
<div class="field align_right never" id="new_password_div">
<%= label_tag :new_password %>
<%= password_field_tag :new_password %>
</div>
<div class="break_line"></div>
<div class="field align_right never" id="password_confirmation_div">
<%= label_tag :confirmation %>
<%= password_field_tag :password_confirmation %>
</div>
<div class="break_line"></div>
<div class="actions"><%= submit_tag "Log in" %></div>
</div>
<% end %>
</div>
HTML representation of the form:
<form method="post" action="/sessions" accept-charset="UTF-8"><div style="margin:0;padding:0;display:inline"><input type="hidden" value="✓" name="utf8"><input type="hidden" value="...=" name="authenticity_token"></div>
<div class="col-md-6">
<div class="field align_right">
<label for="logon">Logon</label>
<input type="text" name="logon" id="logon" style="background-image: url("..."); background-repeat: no-repeat; background-attachment: scroll; background-position: right center;">
</div>
<div class="break_line"></div>
<div class="field align_right">
<label for="password">Password</label>
<input type="password" name="password" id="password" style="background-image: url("..."); background-repeat: no-repeat; background-attachment: scroll; background-position: right center;">
</div>
<div class="break_line"></div>
<div class="field align_right">
<label for="remember_me">Remember me</label>
<input type="checkbox" value="1" name="remember_me" id="remember_me" checked="checked">
</div>
<div class="break_line"></div>
<div class="field align_right">
<label for="change_password">Change password</labe...