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:

enter image description hereenter image description hereenter image description here

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/

+3


source to share


1 answer


This was my suggestion for comments and it helped you !!!!



Just change col-xs-6

to another class like container

or container-fluid

. This is because the class divider col

gets the width to match the screen size. And we have to do it col-xs-6

, so this change happens on the screen.

+2


source







All Articles