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

Question

So I am finishing up this Rails 4 app I built recently, and am literally at the end. I just need to make it work on Heroku. I have precompiled all my assets, and while it does load up all my stylesheets and images, it puts them all in the wrong places. I also made a mobile version for Iphone 5 and it works fine on Heroku in the mobile emulator. So it's only an issue for the laptop version. I have Bootstrap installed but am not using it that much.

Here is a picture of the localhost version:

http://i988.photobucket.com/albums/af6/jtbitt/ScreenShot2014-04-08at115020PM_zpsed0008a1.png

And here is the heroku version:

http://i988.photobucket.com/albums/af6/jtbitt/ScreenShot2014-04-08at115028PM_zps201cbd84.png

I am getting these same kind of issues on literally every page of my app. So I'm thinking if I can find the setting that is messed up it will fix everything at the same time. Any ideas?

Answer 1

hey guys problem solved

Not really - your CSS is still dysfunctional

Here's what it looks like on my monitor:

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

R