Question

I am completing Michael Hartl’s Rails Tutorial Chapter 10.2.2 Sample Microposts

visit http://ruby.railstutorial.org/chapters/user-microposts?version=3.2#sec-creating_microposts

I am running into an issue where the profile page css will not render properly. Rspec passes, the page loads, and I can navigate the entire site without issue. The css code is called out by class which links the css code to the rails output. I will paste as much info as I can think of.
Note: I am an absolute beginner to Rails programming or object oriented anything so please be specific in your responses as I may not yet have the experience to comprehend the subject.

I would post pictures but I do not posses the required reputation points yet.

Here is some code though…

This is the HTML for the profile page that does not render properly

<% provide(:title, @user.name) %>
<div class="row">
  <aside class="span4">
    <section>
      <h1>
        <%= gravatar_for @user %>
        <%= @user.name %>
      </h1>
    </section>
  </aside>

  <div class="span8">
    <% if @user.microposts.any? %>
      <h3>Microposts (<%= @user.microposts.count %>)</h3>
      <ol class="microposts">
        <%= render @microposts %>
      </ol>
      <%= will_paginate @microposts %>
    <% end %>
  </div>

</div>

This is the css code for this page

/* microposts */

  .microposts {
    list-style: none;
    margin: 10px 0 0 0;

    li {
      padding: 10px 0;
      border-top: 1px solid #e8e8e8;
    }
  }
  .content {
    display: block;
  }

  .timestamp {
    color: $grayLight;
  }

  .gravatar {
    float: left;
    margin-right: 10px;
  }

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

Also, the home page calls upon this css code as well to render the microposts if the user is signed in. This page is also not rendering the microposts properly. The home page HTML is below

<% if signed_in? %>
  <div class="row">
    <aside class="span4">
      <section>
        <%= render 'shared/user_info' %>
      </section>
      <section>
        <%= render 'shared/micropost_form' %>
      </section>
    </aside>
     <div class="span8">
      <h3>Micropost Feed</h3>
      <%= render 'shared/feed' %>
    </div>
  </div>  
<% else %>

  <div class="center hero-unit">

    <h1>Welcome to the Sample App</h1>

        <h2>
            This is the home page for the
            <a href="http://railstutorial.org/">Ruby on Rails Tutorial</a>
            sample application <br>Sample App Tutorial Completed by Jake Danforth.
        </h2>

        <%= link_to "Sign up now... Because it's Awesome!!!", signup_path, class: "btn btn-large btn-primary" %>
    </div>

    <%= link_to image_tag("rails.png", alt: "Rails"), 'http://rubyonrails.org/' %>
<% end %> 

The last code calls upon the _user_info.html.erb file which the code is included below

<a href="<%= user_path(current_user) %>">
  <%= gravatar_for current_user, size: 52 %>
</a>
<h1>
  <%= current_user.name %>
</h1>
<span>
  <%= link_to "view my profile", current_user %>
</span>
<span>
  <%= pluralize(current_user.microposts.count, "micropost") %>
</span>

As I continually troubleshoot this issue, I will update what I can find out. The issue is with <%= render @microposts %> which calls the @microposts variable (right?). This is defined in file users_controller.rb as

    def show
    '@user = User.find(params[:id])
    '@microposts = @user.microposts.paginate(page: params[:page])
  end

Which does not lead to the css file as far as I can tell. Somehow this needs to call on the .microposts class in the css file to render.

Answer 1

I have discovered an error in the CSS code. I rearranged the CSS code to clean it up even more and found an extra bracket. I don’t know why the code was still rendering the pages without faulting, however, when I removed the bracket it began to render the screen as intended. I am leaving this file on-line in case someone else is trying the tutorial and runs into issues with brackets. Make sure that the open and close brackets are equal!