One page on a Bootstrap 3 / Rails site is not responsive on mobile devices (others work)
Thanks to the answer to my previous stack question, I was able to make bootstrap 3 linking in my Ruby on Rails 4 app. Powerfully responsive.
However, my page views/devise/sessions/new.html.erb
(aka login page) is not responsive. Instead, it looks like this on my iPhone 5s:
This is my file new.html.erb
:
<div class="row">
<div class="col-xs-6">
<%= simple_form_for(resource, as: resource_name, url: session_path(resource_name), html: {class: "well"}) do |f| %>
<fieldset>
<legend>Log in</legend>
<%= f.input :email, label: 'Email' %>
<%= f.input :password, label: 'Password' %>
<% if devise_mapping.rememberable? -%>
<div class="field">
<%= f.input :remember_me, as: :boolean %>
</div>
</fieldset>
<% end -%>
<div class="actions">
<%= f.button :submit, "Log in" %>
</div>
<% end %>
<%= render "devise/shared/links" %>
</div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs"></div>
<div class="col-xs-6">
<center><h2>Signing in is easy and secure</h2>
<img src="http://static1.squarespace.com/static/54adc070e4b0c8f53bde4cf9/t/54ecfc98e4b0cc380c7af39a/1429903823657/?format=300w" /></center>
</div>
</div>
I added viewport
later trying to fix it, but it still didn't help.
Can the image be too big? If I need to, I can remove it, but will the gray box under the email and password fields still look too skinny?
Here's a test deployment if you'd like to try it yourself: https://wheels-registration-yamilethmedina.c9.io/
source to share
This was my suggestion for comments and it helped you !!!!
Just change
col-xs-6
to another class likecontainer
orcontainer-fluid
. This is because the class dividercol
gets the width to match the screen size. And we have to do itcol-xs-6
, so this change happens on the screen.
source to share