Home>

I am doing Chapter 13 of the Rails tutorial, and only a part of the CSS in the development environment is loaded. For example,.content(see the source code below) is partially read, but other CSS is not read normally like an image. What can be the cause? I would appreciate your help.

Applicable source code

assets/stylesheets/custom.scss

/* microposts * /
.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;
  }
}


config/environments/development.rb

Rails.application.configure do
  config.web_console.whitelisted_ips = '*********'
  config.cache_classes = false
  config.eager_load = false
  config.consider_all_requests_local = true
  if Rails.root.join ('tmp/caching-dev.txt'). exist?
    config.action_controller.perform_caching = true
    config.cache_store =: memory_store
    config.public_file_server.headers = {
      'Cache-Control' =>"public, max-age = # {2.days.seconds.to_i}"
    }
  else
    config.action_controller.perform_caching = false
    config.cache_store =: null_store
  end
  config.action_mailer.raise_delivery_errors = true
  config.action_mailer.delivery_method =: test
  host = '**************. vfs.cloud9.us-east-2.amazonaws.com'
  config.action_mailer.default_url_options = {host: host, protocol: 'https'}
  config.action_mailer.perform_caching = false
  config.active_support.deprecation =: log
  config.active_record.migration_error =: page_load
  config.assets.debug = true
  config.assets.quiet = true
  config.file_watcher = ActiveSupport :: EventedFileUpdateChecker
end

views/users/show.html.erb

<% provide (: title, @ user.name)%>
<div>
  <aside>
    <section>
      <h1>
        <% = gravatar_for @user%>
        <% = @ user.name%>
      </h1>
    </section>
  </aside>
  <div>
    <% if @ user.microposts.any?%>
      <h3>Microposts (<% = @ user.microposts.count%>)</h3>
      <ol>
        <% = render @microposts%>
      </ol>
      <% = will_paginate @microposts%>
    <% end%>
  </div>
</div>


views/microposts/_micropost.html.erb

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

helpers/users_helper.rb

module UsersHelper
  #Return Gravatar image of user given by argument
  def gravatar_for (user, size: 80)
    gravatar_id = Digest :: MD5 :: hexdigest (user.email.downcase)
    size = url_options [: size]
    gravatar_url = "https://secure.gravatar.com/avatar/#{gravatar_id}?s=#{size}"
    image_tag (gravatar_url, alt: user.name, class: "gravatar")
  end
end
Tried

Restart server
/ * Reflection of other CSS in microposts */

Additional
Is there any doubt about .gravatar in custom.scss? float: left;has been applied, but if you also entermargin-right: 10px;margin-top: 5px;together, it will be strange again. . .

Appendix 2
After setting the image size to 50 after theimage_tag (gravatar_url, alt: user.name, class:"gravatar")class in helpers/users_helper.rb, and then applying CSS It went well.

Supplemental information (FW/tool version etc.)

Rails 5.1.4
AWS Cloud 9

  • Answer # 1

    After setting the image size to 50 after the image_tag (gravatar_url, alt: user.name, class:"gravatar") class in helpers/users_helper.rb, it worked well when CSS was applied.

Related articles