What would cause the responsive features on this site not work on mobile?

Question

I am using a Bootstrap Template, that you can see the live version here - https://02dc74ce3e31e56a52ebcc845dca58e87283aabe.googledrive.com/host/0Bxbofwq0kd4ReUt2YWVOYmt3WVU/

If you view it on a mobile device, you will see how the responsiveness of Bootstrap kicks in.

But when I applied it to my Rails app, the mobile version does not look the same.

Any ideas what may be causing the discrepancy?

You can see the differences especially in both the main 'content' area with the story (notice on my version you see multiple stories in the main view, but on the original you only see 1 story and you can read the content more easily). You can also see it when you press the buttons.

Press the 'blue' button to the right top of the original and you will notice that the sidepanel comes out at the top like it should. But on my version it still comes to the side and everything is small.

What am I missing?

Thanks.

Answer 1

Add this to your application.html.erb:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Answer 2

If you try calling the CSS and JS being used as individual standalone files, instead of minified, do you still have this issue? Order of these files will matter too. I've seen lots of quirky issues when one JS gets loaded before another, same goes for CSS.

P.S. I would leave this information as a 'Comment' vs. Answer but I don't have enough stack overflow credit yet to do so ;-)

Answer 3

Judging by your css file, you have loaded similar css multiple times. Consider the fact that, if everything else suggested by the people above has been corrected, the placement of the css files in the application scss file could overwrite your correct code.

I would also check the viewport meta tag as suggested above

Answer 4

You have made too many changes while you are implementing the html in your rails view. Like original header have following content :

<header class="header">
  <hgroup class="pull-left">
    <h1 class="site-title">
      <a href="index.html" title="Von" rel="home">
        <i class="fa fa-lemon-o"></i> Von
      </a>
    </h1>
  </hgroup>
  <div class="btn btn-primary pull-right" id="togglesidebar">
    <i class="fa fa-bars"></i>
  </div>
</header>

But in your view instead of <hgroup class="pull-left"> you have <hgroup class="pull-left col-xs-3 col-sm-3 col-md-3 col-lg-3"> and for <div class="btn btn-primary pull-right" id="togglesidebar"> you have <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 masthead-group-3"> also You added two more element in between these two element that destroyed your all header view.

You haven't used middle section from html design it seems you write your own. In your <header class="entry-header"> You created div instead of image tag. So every thing started distorted here. You include header footer section for each main section. But it's not big issue. Try remove div for confirmed and unconfirmed and use image instead. SO you will have proper view. Also remove row class from view that you added so view look more symmetric.

In your about section. When you try to see on mobile view. width of main container <div style="display: inline-block;" class="col-sm-3 sidebar" id="secondary"> is calculated on the basis of it's child element like <div class="about">. As your child element is form and it's having width less than the width displayed on form so remaining section not having proper background color #1c171e. So try increase width of you form control or <h4>Submit Report</h4> like <h4>Submit Report &nbsp;&nbsp;&nbsp;</h4> (kind of hack)under about section You will get proper view for this also.

Answer 5

Make sure that if you have using rails g scaffold that you remove the scaffold.css file.