Liz Liz - 3 months ago 10
CSS Question

Heroku Appears Different From Localhost

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

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

Here is what shows up on my
localhost
:

View from Localhost

And here's what happens on
Heroku
:

View from Heroku

Here is the
html
/
erb
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>

<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>

<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>

<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 %>
</div>

<script>
$('#babies').hover(
function(){ $('#needle').addClass('animation-babies') },
function(){ $('#needle').removeClass('animation-babies') }
);
$('#kids').hover(
function(){ $('#needle').addClass('animation-kids') },
function(){ $('#needle').removeClass('animation-kids') }
);
$('#teens').hover(
function(){ $('#needle').addClass('animation-teens') },
function(){ $('#needle').removeClass('animation-teens') }
);
$('#adults').hover(
function(){ $('#needle').addClass('animation-adults') },
function(){ $('#needle').removeClass('animation-adults') }
);
</script>


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

<!DOCTYPE html>
<html>
<head>
<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='https://fonts.googleapis.com/css?family=Heebo:400,900,100,700|Covered+By+Your+Grace|Josefin+Slab' rel='stylesheet' type='text/css'>
<%= javascript_include_tag 'Ckeditor.cdn_url' %>
</head>
<body>

<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>
<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 %>
</ul>
</div> <!-- collapse -->
</div> <!-- container-fluid -->
</div> <!-- custom-bootstrap-menu -->

<%= yield %>

<footer>
<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">
</map>
</div> <!-- footer row -->
</footer>
</body>
</html>


Finally, here is the relevant
SCSS
:

.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
Heroku
than it is on my
localhost
.

Liz Liz
Answer

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.

Comments