Hartl Rails Tutorial listing 11.25 — CSS for microposts does not update

Question

Working on the Rails Tutorial, I ran into problems at listing 11.25 . After updating the CSS per the listing, nothing changes in my locally-hosted development-environment app's display (for a logged-in, activated user) of the seeded users' microposts - the indentation is still wrong, etc. That is, /users/1 still looks like this (screenshot) . What do I need to do to get the CSS to apply?

I have had no issues up to this point. All tests are passing green. I am only using the gems suggested by the tutorial. I have performed the following trouble-shooting steps:

1. I have restarted the WEBrick server several times
2. Closed and opened my browser. (on Chrome for Linux, 47.0.2526.111 (64-bit))
3. Tried another browser (latest Firefox)
4. Cleared Chrome's cache
5. Restarted my computer

/app/views/users/show.html.erb :

<% provide(:title, @user.name) %>
<div class="row">
  <aside class="col-md-4">
    <section class="user_info">
      <h1>
        <%= gravatar_for @user %>
        <%= @user.name %>
      </h1>
    </section>
  </aside>
  <div class="col-md-8">
    <% if @user.microposts.any? %>
      <h3>Microposts (<%= @user.microposts.count %>)</h3>
      <ol class="microposts">
        <%= render @microposts %>
      </ol>
      <%= will_paginate @microposts %>
    <% end %>
  </div>
</div>

/app/views/microposts/_micropost.html.erb :

<li id="micropost-<%= micropost.id %>">
  <%= link_to gravatar_for(micropost.user, size: 50), micropost.user %>
  <span class="user"><%= link_to micropost.user.name, micropost.user %></span>
  <span class="content"><%= micropost.content %></span>
  <span class="timestamp">
    Posted <%= time_ago_in_words(micropost.created_at) %> ago.
  </span>
</li>

app/assets/stylesheets/custom.css.scss :

.microposts {
  list-style: none;
  padding: 0;
  li {
    padding: 10px 0;
    border-top: 1px solid #e8e8e8;
  }
  .user {
    margin-top: 5em;
    padding-top: 0;
  }
  .content {
    display: block;
    margin-left: 60px;
    img {
      display: block;
      padding: 5px 0;
    }
  }
  .timestamp {
    color: $gray-light;
    display: block;
    margin-left: 60px;
  }
  .gravatar {
    float: left;
    margin-right: 10px;
    margin-top: 5px;
  }
}

aside {
  textarea {
    height: 100px;
    margin-bottom: 5px;
  }
}

span.picture {
  margin-top: 10px;
  input {
    border: 0;
  }
}

app/models/micropost.rb :

class Micropost < ActiveRecord::Base
  belongs_to :user
  default_scope -> { order(created_at: :desc) }
  validates :user_id, presence: true
  validates :content, presence: true, length: { maximum: 140 }
end

app/controllers/users_controller.rb :

class UsersController < ApplicationController
  def show
    @user = User.find(params[:id])
    @microposts = @user.microposts.paginate(page: params[:page])
  end
end

Answer 1

I had this issue too. The problem is in your code here:

app/views/microposts/_micropost.html.erb

<%= link_to gravatar_for(micropost.user), micropost.user %>

The CSS is set up as if you completed exercise 1 in Chapter 7. Either complete this additional exercise or increase the padding in your CSS file for microposts. I don't remember exactly which padding had to be increased but try these first:

.microposts {
  list-style: none;
  padding: 0;
  li {
    padding: 10px 0;
    border-top: 1px solid #e8e8e8;
  }

Also note: here is an easy way to debug CSS issues. Using Chrome as your browser, go to the hamburger menu in the upper right hand size of the browser and select "More Tools" > "Developer Tools". Then click the button in the top left hand side of the developer tool:

Now you can use your mouse to select any part of the page. Find the part of the page that is causing your problem and click on it. Now on the right side of the developer's toolbar under "Styles" you can find all of the CSS that is applied to the element you selected. You can even change the values right in the developer tool and see it update real-time on your screen. So in your case, play around with the padding until you have the right height. Then you can go back into your code and make the change there, reload your page and it should work.