How to get bootstrap form on mobile width adjusted

Vote count:

0

I am making a rails app, and I am making a form for user sign up. I am using bootstrap, but not the bootstrap gem or bootstrap form gem.

I was able to get the width I liked on desktop and tablet, but when I size it for mobile, the form inputs gets too small and frankly looks like shit. I have tried media queries and centering 'tricks' along with playing with the various width's, but so far no dice. Here is my html and css;

new.html.erb

<div class="container signup"> 
  <div class="row">
    <div class="col-md-6 col-md-offset-3">
      <%= form_for(@user) do |f| %>
        <%= render 'shared/error_messages' %>

        <%= f.label :name %>
        <%= f.text_field :name, class: 'form-control' %>

        <%= f.label :email %>
        <%= f.text_field :email, class: 'form-control' %>

        <%= f.label :date_of_birth, "Date Of Birth" %>
        <%= f.date_field :date_of_birth, class: 'form-control' %>

        <%= f.label :password %>
        <%= f.password_field :password, class: 'form-control' %>

        <%= f.label :password_confirmation, "Confirmation" %>
        <%= f.password_field :password_confirmation, class: 'form-control' %>

     <% end %>
    </div>
  </div>
</div> 

user.css

/* so all of the forms are the same size on desktop/ipad, date field was messing with the width/heights  */
#new_user > input {
    width: 470px !important;
}

/* width to get it decent (not working), and margin for centering (not working) */
@media(max-width:768px) {
    #new_user > input {
        width: 200px !important;
        margin: 0 auto !important;
    }
}

I know there a mobile classes in bootstrap for styling forms. If anyone can see what I'm doing wrong or has some suggestions, any help would be much appreciated.

asked 1 min ago

James N

1

How to get bootstrap form on mobile width adjusted