CSS attribute from bootstrap.css not being recognized by Heroku

Question

I'm new to ruby and this is my first stackoverflow question (although I've used previous questions and answers a ton - thank you stackoverflow community for that!) so please excuse me if this is a dumb question.

I've seen other questions posted about problems with Heroku and boostrap.css, but this isn't so much an outright error as it is something not working quite as expected.

I recently added a top nav bar in my Rails 3 app using the stylings provided by boostrap.css. In the documentation, they recommend adding padding-top: 40px to the css file to make room for the nav bar.

The padding looks right on localhost but for whatever reason is not working in Heroku. The rest of the boostrap css appears to be correct (button colors, table attributes etc) but I cannot make the padding stick. An easy workaround would be adding some
tags at the top of my index.html file, but I'd like to understand why this is happening in case it's indicative of a larger css problem.

Code added to bootstrap.css file for padding:

html, body {padding-bottom: 10px;
padding-right: 10px;   
padding-left: 10px;
padding-top: 40px; 
}

index.html code:

<div class="topbar">
<div class="fill">
    <div class="container">
        <h3><%= link_to 'Your Book Club', homes_path %></h3>
        <ul>
            <li><%= link_to 'Home', homes_path %></li>
            <li class="active"><%= link_to 'Books', books_path %></li>
            <li><%= link_to 'Locations', locations_path %></li>
            <li><a href="#">Calendar</a></li>
      </ul>
      <form action="">
        <input type="text" placeholder="Search" />
      </form>
      <ul class="nav secondary-nav">
        <li class="menu">
            <a href="#" class="menu">Account stuff will go here</a>
            <ul class="menu-dropdown">
                <li><a href="#">Dolor sit</a></li>
                <li><a href="#">Amet Consequeter</a></li>
                <li class="divider"></li>
                <li><a href="#">Enough with the Latin</a></li>
            </ul>
        </li>
      </ul>
    </div>
</div>
</div>


<h1>Which books do you want to read as part of our book club?</h1>

<br />

<h3>Instructions:</h3>

<br />

<p>1. Vote for any of the books below that you'd like to read</p>

<br /><br/>

<p>2. And/or:

    <button type="submit" class="btn"><%= link_to 'Add a New Book', new_book_path %></button></p>

    <br /><br/>

<p>3.

    <button type="submit" class="btn info"><a href="./locations">Vote on     Locations</a></button> 


            <br /><br />

<table class="zebra-striped">
<tr>
<th>Title (Click name to see description)</th>
<th>ISBN</th>
<th>How many votes does it have?</th>
<th>Vote for this book</th>
<th></th>
</tr>


<% @books.each do |book| %>
<tr>

<td><%= link_to book.title, book %></td>
<td><%= book.isbn %></td>
<td><%= pluralize(book.votes.length, "vote") %></td>
<td><%= link_to '+1', votes_path(:book_id => book.id), :method => :post %></td>  
<td><span class="label important"><%= link_to 'Delete', book, confirm: 'Are you sure?',             
                method: :delete %></span></td>
  </tr>
<% end %>

</div>

</table>

<br />

Did you remember to commit and push with the padding set appropriately? Have you tried a hard refresh (just to make sure you're not seeing stale css)? — coreyward
– coreyward, Commented Nov 7, 2011 at 22:40
I've committed several times (moved css to bottom of file, then top) but nothing. I opened up the app in a different browser and it looks the same (no padding). You can check it out here: simple-water-5927.herokuapp.com/books — Jessie A. Young
– Jessie A. Young, Commented Nov 7, 2011 at 22:59

coreyward · Accepted Answer · 2011-11-07 23:06:03Z

4

I didn't catch that you're using Asset Pipeline. That's what your problem is; you need to precompile your assets before you commit and push: http://devcenter.heroku.com/articles/rails31_heroku_cedar

bundle exec rake assets:precompile
git ci -a -m "Compile assets for production"
git push

Note that if you're on Celadon Cedar there are some hooks that will do this for you on slug compilation, which is really convenient.

answered Nov 7, 2011 at 23:06

coreyward

80.5k21 gold badges148 silver badges176 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Jessie A. Young Over a year ago

Wow thanks that certainly did something! Problem is, now all of the other styling from bootstrap.css are gone (from Heroku, not localhost). Do you know why the css on Heroku looks different from the css on my local server?

Jessie A. Young Over a year ago

I just moved my CSS from the books.css.scss (for my books model) file to application.css.scss and now the padding works in Heroku! Must have something to do with the asset pipeline, which I am now learning about here: guides.rubyonrails.org/asset_pipeline.html Thank you to coreyward for your help!

coreyward Over a year ago

No problem! Did you add a line to import bootstrap.css into your application.css file?

Jessie A. Young Over a year ago

No, I just copy-pasted the css. How would I do that with adding a line?

coreyward Over a year ago

At the top of application.css use //= require bootstrap and then the next line //= require_self. Then the bootstrap.css code will be added before everything in application.css and they will be minified and combined together in production.

Collectives™ on Stack Overflow

CSS attribute from bootstrap.css not being recognized by Heroku

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related