CODEWITHSUNDEEP
htmlcsstwitter-bootstrapruby-on-rails-4devise
Yami Medina
Yami Medina

Reputation: 670

One page on Bootstrap 3/Rails site isn't mobile responsive (the others work)

Thanks to the answer to my previous stackoverflow question, I was able to make the bootstrap 3 layout on my Ruby on Rails 4 app MOSTLY mobile-responsive.

However, my views/devise/sessions/new.html.erb page (aka the login page) isn't responsive. Instead, it looks like this on my iPhone 5s:

enter image description here enter image description here enter image description here

This is my new.html.erb file:

<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 the viewport later on in an attempt to fix it, but it still didn't help.

Could the image be too large? If I have to, I can delete it, but would the gray box underneath the email and password fields still look overly skinny like that?

Here is the test deployment if you'd like to try it yourself: https://wheels-registration-yamilethmedina.c9.io/

Upvotes: 3

Views: 222

Answers (1)

Suraj Palwe
Suraj Palwe

Reputation: 2120

this was my comment suggestion and that helped to you!!!!

Just change the col-xs-6 to other class like container or container-fluid.This is because the col class divides gets the width as per the screen size . And we are forcing to make it col-xs-6 so this change happens to the screen.

Upvotes: 2

Related Questions