Search code examples
ruby-on-railsrailstutorial.org

Micropost won't align railstutorial.org


I have encountered this and want to share.

'custom.css.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;
  }
}

'show.html.er'

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

When I used chrome to inspect element, I found out that the environment automatically adjusts. I tried to adjust the padding wherein it aligned the micropost. It took me a day and I decided to ask a help and so, he read the inspect element from chrome. and there, he tried to adjust the padding.


Solution

  • /* microposts */
    
    .microposts {
      list-style: none;
      padding: 0;
      li {
        padding: 12px 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;
      }
    }
    

    As you can see there, I changed the padding from 10px to 12 px. Try to change to other sizes. It might fix.

    Hope this will save you time and also, I don't know why this happens, I'm new to rails and I don't know why this happens. I'd be glad if you'll explain. Thanks!