CSS Is Looking Different on Heroku

CSS is looking different on heroku

The problem is related to the handling of the asset pipeline on Heroku. There are several ways on how this can be handled, see http://devcenter.heroku.com/articles/rails31_heroku_cedar

I fixed the issue in my application by pre-compiling the assets locally on my machine and then pushing them to Heroku.

Pre-compile the assets:

RAILS_ENV=production bundle exec rake assets:precompile

Add/commit the changes to git repository:

git add public/assets
git commit -m "vendor compiled assets"

To be safe I tested the whole thing on a local branch on my machine first which I pushed to Heroku using the following command (Heroku normally ignores all branches except the master branch, thus the trick):

git push -f heroku heroku-assetpipeline:master

Heroku Appears Different From Localhost

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.

Heroku messes up styles

Your styles look good to me!

Assets

There's something you should know about Heroku's handling of styles. You have to precompile your assets before you deploy the app. Reason for this is to give the app a consistent feel, and reduces load on the Heroku dynos

Here's how to set it up:

#config/environments/production.rb
config.serve_static_assets = true
config.assets.compile = true

When you want to deploy to Heroku, you just need to run:

rake assets:precompile RAILS_ENV=production

This will precompile your styles, allowing you to keep them consistent on Heroku & locally

CSS Style problem in web deployment on heroku

I don't know exactly where was the problem but it working now.

I deleted the app from heroku and .git folder from my "website" folder and change folder name from CSS to css (inside static folder).

then i retry all the process and now it's working fine

Why does my viewport look different when I deploy to heroku?

A few details you could check.

(1) Rewrite the head of your page as below:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Notify</title>
    <link rel="stylesheet" type="text/css" href="./app.css">
    <link rel="stylesheet" type="text/css" href="./bootstrap.css">
</head>
<body>

</body>
</html>

Note that I've declared the doctype, charset, replaced the semi-colons with commas in your viewport meta tag (as suggested by brance , and changed user-scalable=0 to user-scalable=no

Clear your cache and check.

(2) Use webinspector to triple check that you have no 404s and that all the files, especially css are loading and that there isn't a path issue

(3) If still no joy, post a URL

Good luck!

Heroku is messing up my CSS positioning. Looks good on localhost, looks bad on Heroku

hey guys problem solved

Not really - your CSS is still dysfunctional

Here's what it looks like on my monitor:

Sample Image

The reason is you're using position: absolute; to position all the elements. This is generally a BIG no-no for the whole site (small elements, yes; big elements no).

I made a very basic JSFiddle of how you'd approach this idea:

#html
<div class="stripe">
    <div class="phone"><img src="http://escrow.herokuapp.com/assets/iphone.png"></div>
    <div class="info">This is where information goes</div>
</div>

#CSS
.stripe {
    background-color: #ff0;
    height: 250px;
    margin: 60px 0;
}

.stripe > div {
    position: relative;
    top: -50px;
    display: inline-block;
    vertical-align: middle;
}

CSS Is Looking Different on Heroku