HTML/CSS acting very weird in my Rails 4 app (height not customizable etc) -


i have 2 questions post. first why toyota camry act that? enter image description here

here's code:

#posts     - @posts.each |post|         .post             .post_content                 .title                     %h2                         = link_to truncate((post.title), length: 25), post                 %p                     $                     = post.price                 .post_image                     = link_to image_tag(post.image.url), post                 .data.clearfix                     %p.username                         listing                         = post.user.name                     %p.buttons                         %span                             %i.fa.fa-comments-o                             = post.inquiries.count                         %span                             %i.fa.fa-thumbs-o-up                             = post.get_likes.size 

the css:

#posts {     .post {         width: 20%;         float: right;         margin: 1rem 1.5%;         border: 1px solid #e4e4e4;         /*height: auto;*/         .post_image {             height: auto;             overflow: hidden;             img {                 width: 100%;                 border-radius: .3rem .3rem 0 0;             }         }         .post_content {             margin: 1rem;             h2 {                 margin: 0;                 font-weight: 100;                 padding: 1rem 5%;                 border-bottom: 1px solid #e4e4e4;                 font-size: 1.5rem;                 {                     text-decoration: none;                     /*color: #333233;*/                     &:hover {                         color: #6e58e0;                     }                 }             }             .data {                 padding: .75rem 5%;                 color: #969696;                 .username, .buttons {                     margin: 0;                     font-size: 1rem;                 }                 .username {                     float: left;                 }                 .buttons {                     float: right;                     span {                         margin-left: .5rem;                     }                 }             }         }     } } 

i think that's that's working on page, if i'm missing please let me know.

i've been having lot of problems it, trying every way know how fix it.

i didn't have success in making individual post element same width , height, evenly. second part question. i'm trying title, image, etc evenly throughout each post.

any appreciated always. thanks

edit: i'm not quite sure mean rendered html enter image description here

additionally, same css , html applied part of page works correctly enter image description here

try add following line "#posts .post" css

box-sizing: border-box; 

Comments

Popular posts from this blog

dns - How To Use Custom Nameserver On Free Cloudflare? -

python - Pygame screen.blit not working -

c# - Web API response xml language -