Liz Liz - 1 month ago 5
CSS Question

Heroku Appears Different From Localhost

I have a page of my rails app set up correctly on my

, but when I push it to
everything goes quite wrong (with the exact same code, to the best of my knowledge).

Here is what shows up on my

View from Localhost

And here's what happens on

View from Heroku

Here is the
code for the page in question:

<div style="height: 80px"></div>

<div class="text-center">
<h1 style="font-size: 10vh">Gift Helper</h1>
<p>Select the age group for which you are being forced to shop.</p>

<div style="height: 50px" class="hidden-xs"></div>

<div class="text-center frame">
<%= image_tag 'speedometer.jpg', style: "width: 100%; max-width: 700px", class: "vertical-align-in-div", alt: "Speedometer of Gifting. Ooooh. Aaaaah." %>

<div class="text-center frame" style="margin-top: -465px">
<%= image_tag 'needle.png', id: "needle", style: "width: 100%; max-width: 290px", class: "vertical-align-in-div", alt: "The Needle of Wisdom." %>

<div class="frame" style="margin-top: -450px; width: 80%; margin-left: 10%">
<%= link_to gifts_babies_path, id: "kids" do %>
<div id="kids" class="stacking-boxes"></div>
<% end %>
<%= link_to gifts_kids_path do %>
<div id="teens" class="stacking-boxes"></div>
<% end %>
<%= link_to gifts_teens_path do %>
<div id="babies" class="stacking-boxes"></div>
<% end %>
<%= link_to gifts_adults_path do %>
<div id="adults" class="stacking-boxes"></div>
<% end %>

function(){ $('#needle').addClass('animation-babies') },
function(){ $('#needle').removeClass('animation-babies') }
function(){ $('#needle').addClass('animation-kids') },
function(){ $('#needle').removeClass('animation-kids') }
function(){ $('#needle').addClass('animation-teens') },
function(){ $('#needle').removeClass('animation-teens') }
function(){ $('#needle').addClass('animation-adults') },
function(){ $('#needle').removeClass('animation-adults') }

And here is my
code. I think this is relevant because it is the footer (amongst other things) that is being pulled up awkwardly on the

<!DOCTYPE html>
<title>Manly Art of BBQ</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
<%= favicon_link_tag %>
<link href=',900,100,700|Covered+By+Your+Grace|Josefin+Slab' rel='stylesheet' type='text/css'>
<%= javascript_include_tag 'Ckeditor.cdn_url' %>

<div id="custom-bootstrap-menu" class="navbar navbar-default " role="navigation">
<div class="container-fluid">
<div class="navbar-header"><a class="navbar-brand" href="/"><%= image_tag 'LogoTextWhite.png', style: "height: 50px; margin-top: -15px" %></a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
<div class="collapse navbar-collapse navbar-menubuilder">
<ul class="nav navbar-nav navbar-right">
<li><%= link_to 'Man Rules', rules_path %></li>
<li><%= link_to 'BBQ', home_bbq_path %></li>
<li><%= link_to 'Jokes', home_jokes_path %></li>
<li><%= link_to 'Lifehacks', home_lifehacks_path %></li>
<% if current_user %>
<li><%= link_to user_path(current_user) do %>
My Mancard <span style="background-color: red; padding-left: 5px; padding-right: 5px; border-radius: 7px"><%= current_user.manpoints %></span>
<% end %></li>
<% else %>
<li><%= link_to 'Log In', new_user_session_path %></li>
<% end %>
</div> <!-- collapse -->
</div> <!-- container-fluid -->
</div> <!-- custom-bootstrap-menu -->

<%= yield %>

<div class="row" style="height: 320px">
<div class="col-sm-4 text-center">
<%= image_tag 'Logo.png', style: "margin-top: 40px !important; width: 225px; margin: 10px;" %>
</div> <!-- logo column -->

<div class="col-sm-4">
<div class="hidden-xs" style="height: 60px"></div>
<h2 class="text-center comment" style="margin-top: 15px; margin-left: 50px; margin-right: 50px; margin-bottom: 40px; padding-top: 20px; padding-bottom: 20px; border-top: thick solid red; border-bottom: thick solid red !important">Helping Men Be Men</h2>
</div> <!-- men be men column -->

<div class="col-sm-4" style="height: 320px; position: relative">
<%= image_tag "remote-control-menu.png", style: "position: absolute; bottom: 0; right: 0", class: "hidden-xs", usemap: "#image-map", alt: "Remote control menu. Yes, you get to hold it." %>
<%= image_tag "remote-control-menu.png", style: "position: absolute; display: block; bottom: 0; left: 0; right: 0; margin: auto", class: "visible-xs", usemap: "#image-map", alt: "Remote control menu. Yes, you get to hold it." %>
</div> <!-- remote column -->

<map name="image-map">
<% if current_user %>
<area target="" alt="Sign Out" title="Sign Out" href="<%= url_for destroy_user_session_path %>" coords="177,85,121,54" shape="rect">
<area target="" alt="My Mancard" title="My Mancard" href="<%= url_for user_path(current_user) %>" coords="64,148,24" shape="circle">
<% else %>
<area target="" alt="Sign In" title="Sign In" href="<%= url_for new_user_session_path %>" coords="121,51,177,87" shape="rect">
<area target="" alt="My Mancard" title="My Mancard" href="<%= url_for new_user_session_path %>" coords="64,148,24" shape="circle">
<% end %>
<area target="" alt="BBQ" title="BBQ" href="<%= url_for home_bbq_path %>" coords="148,143,26" shape="circle">
<area target="" alt="Man Rules" title="Man Rules" href="<%= url_for rules_path %>" coords="234,144,27" shape="circle">
<area target="" alt="Lifehacks" title="Lifehacks" href="<%= url_for home_lifehacks_path %>" coords="66,230,26" shape="circle">
<area target="" alt="Jokes" title="Jokes" href="<%= url_for home_jokes_path %>" coords="148,223,27" shape="circle">
<area target="" alt="Man Gear" title="Man Gear" href="#" coords="235,228,26" shape="circle">
</div> <!-- footer row -->

Finally, here is the relevant

.frame {
height: 450px; /*can be anything*/
width: 80%;
margin-left: 10%;
position: relative;

.vertical-align-in-div {
max-height: 100%;
max-width: 100%;
width: auto;
height: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;

.speedometer-label {
position: absolute;
z-index: 100;
color: red;
font-family: $font-writing;
font-weight: bolder;
font-size: 7vh;

.stacking-boxes {
height: 175px;
z-index: 100;
position: relative;
width: 49% !important;
display: inline-block;

Can anyone see where the error is here? I can't figure out any answer that would make it different on
than it is on my

Liz Liz

I ended up writing to Heroku's help desk and got the following response:

In your latest build log I notice the following line:

Detected manifest file, assuming assets were compiled locally From the docs here you can see an explanation of what this means:

If a public/assets/manifest.yml is detected in your app, Heroku will assume you are handling asset compilation yourself and will not attempt to compile your assets. Rails 4 uses a file called public/assets/manifest-<md5 hash>.json instead. On both versions you can generate this file by running $ rake assets:precompile locally and checking the resultant files into Git.

This means that if you ran rake assets:precompile locally, even just once, and then checked in that manifest file that you would then need to run assets:precompile and check the results into git before every deploy. Whilst some of our customers like to do this to speed up their deploys, it's quite a subtle change that can catch people out.

I'd recommend removing the public/assets/manifest.yml file from your git repo and re-deploying the app, so that asset compilation is done automatically by Heroku again.

When I ran rake assets:precompile and then re-pushed my app to Heroku it solved the problem.