Stuck with responsive and timeline design with masonry - css

Question

I am very new to tumblr and jQuery Masonry, I have create a test blog.
I have a timeline design, by which posts are aligned in two sides and also I used Masonry to remove the space between the posts.
And I have added responsive behavior to this.
Post and Masonry is working properly with responsive on different window size when the page loads but when i resize the window, its design goes to haywire.
I am not able to identify is it my code's mistake or Masonry's :(
Any help will be really helpful.
It is not working with only (min-width: 768px), (min-width: 1024px) and (min-width: 1824px)
Here is my code:
JS
$(document).ready(function() {
if ($(window).width() <= 679) {
$('#posts_container').masonry('destroy');
}
if ($(window).width() > 680) {
$('#posts_container').masonry({itemSelector: '.shadow', });
}
Arrow_Points();
});
function Arrow_Points() {
//alert("function call");
var s = $('#posts_container').find('.shadow');
$.each(s, function(i, obj) {
var posLeft = $(obj).css("left");
$(obj).addClass('borderclass');
if (posLeft == "0px") {
html = "<span class='rightCorner'></span>";
html += "<div class='rightpostcorner'></div>";
$(obj).prepend(html);
$(this).addClass('margin_hack_left_post');
}
else
{
html = "<span class='leftCorner'></span>";
html += "<div class='leftpostcorner'></div>";
$(obj).prepend(html);
$(this).addClass('margin_hack_right_post');
}
});
}
Media
#media only screen and (max-width: 480px) {
.wrapper {width: 100%;}
.rightCorner, .leftCorner{ display: none; }
.shadow {width: 90%; margin: 40px 5% 10px 5%; }
}
#media only screen and (max-width: 680px) and (min-width: 480px){
.wrapper {width: 100%;}
.rightCorner, .leftCorner{ display: none; }
}
#media only screen and (max-width: 768px) and (min-width: 680px){
.wrapper {width: 100%;}
.rightCorner, .leftCorner{ display: none; }
.shadow {width: 90%; margin: 40px 5% 10px 5%; }
}
#media only screen and (min-width: 768px) and (max-width: 1024px) {
.leftCorner { margin-left:-9%;}
.shadow { width: 45.5%; margin-top: 40px; }
.margin_hack_left_post { margin-left:1.5%%; }
.margin_hack_right_post { margin-left:7.5%; }
}
#media only screen and (min-width: 1025px) and (max-width: 1824px) {
.wrapper {width: 100%; }
.leftCorner {margin-left: -5.5%; }
.shadow { width: 43.7%; margin-top: 40px; }
.margin_hack_left_post { margin-left:4%; }
.margin_hack_right_post { margin-left:8%; }
}
/* LARGE SCREENS */
#media only screen and (min-width: 1824px) {
.wrapper {width: 1200px; margin: 0 auto;}
.shadow { width: 43.7%; margin-top: 40px; }
.margin_hack_left_post { margin-left:4%; }
.margin_hack_right_post { margin-left:8%; }
}
My CSS:
.shadow
{
float: left;
background-color: #ffffff;
min-height: 50px;
text-align: justify;
word-wrap:break-word;
}
.timeline_container
{
width: 16px;
text-align: center;
margin: 0 auto;
cursor:pointer;
display: block;
}
.timeline
{
margin: 0 auto;
background-color: red;
display: block;
float: left;
height: 100%;
left: 49.75%;
position: absolute;
width: 1px;
z-index: -1;
}
.timeline:hover{cursor: pointer;margin: 0 auto;}
.timeline div.plus{width: 14px;height: 14px;position: relative;left: -6px;}
.rightCorner
{
background-image: url("xyz.png");
height: 30px;
margin-left: 99.5%;
margin-top: 8px;
padding: 0;
vertical-align: top;
width: 30px;
z-index: 2;
position: absolute;
}
.leftCorner
{
background-image: url("abc.png");
height: 30px;
width: 30px;
margin-top: 8px;
position: absolute;
z-index:2;
}
.content
{
margin-left: auto;
margin-right: auto;
max-width: none;
min-width: 86%;
position: relative;
z-index: 2;
}
And my tumblr HTML is
{block:Posts}
<article class="shadow">
{block:Date}
<div class="post_info">
<section class="post-controls">
<ul style="padding-left: 0px; float: left; width:80%">
<li style="width: 30%; margin-left: 0px; padding-left: 0px; margin-top: 7px;">
<i class="icon-clock"></i> {DayOfMonthWithZero} {ShortMonth} {ShortYear}
</li>
{block:NoteCount}<li style="width: 30%; margin-left: 0px; padding-left: 0px; margin-top: 7px;">
<i class="icon-heart"></i> {NoteCount}</li>{/block:NoteCount}
</ul>
<ul style="float:right;">
<li class="like_link">{ReblogButton size="20"}</li>
<li class="reblog_link">{LikeButton size="20"}</li>
</ul>
</section>
</div>
{/block:Date}
<div class="post_padding">
{block:Audio}
<div class="audio" id="{PostID}">
<div class="album_art">{block:AlbumArt}<img class="scale-with-grid" src="{AlbumArtURL}" />{/block:AlbumArt}</div>
<div class="audio_player_container">
{block:AudioEmbed}{AudioEmbed}{/block:AudioEmbed}
{block:AudioPlayer}{AudioPlayerWhite}{/block:AudioPlayer}
</div>
<div class="caption">
<ul class="audio_details">
{block:TrackName}<li><span class="audio_bold">Song Title:</span> {TrackName}</li>{/block:TrackName}
{block:Artist}<li><span class="audio_bold">Artist:</span> {Artist}</li>{/block:Artist}
{block:Album}<li><span class="audio_bold">Album:</span> {Album}</li>{/block:Album}
<li><span class="audio_bold">Plays:</span> {PlayCount}</li>
</ul>
{block:Caption}{caption}{/block:Caption}
</div>
</div>
{/block:Audio}
{block:Chat}
{block:Title}<div class="chat_title"><h2>{Title}</h2></div>{/block:Title}
{block:Lines}
<div class="lines"><div class="line {Alt}">{block:Label}<strong>{Label}</strong>{/block:Label} {Line}</div></div>
{/block:Lines}
{/block:Chat}
{block:Link}
<div class="link_title"><a href="{URL}" {Target}>{Name} →</a></div>
<div class="caption">{block:Description}{Description}{/block:Description}</div>
{/block:Link}
{block:Photo}
<div class="photo_post">
<a href="{Permalink}" rel="prettyPhoto">
<img class="scale-with-grid" src="{PhotoURL-HighRes}"/>
</a>
</div>
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
{/block:Photo}
{block:Photoset}
<div class="photo-slideshow" data-layout="{PhotosetLayout}">
{block:Photos}
<div class="photo-data">
<div class="photo">
<a href="{Permalink}" rel="prettyPhoto[set]">
<img alt="{PhotoAlt}" src="{PhotoURL-500}" data-highres="{PhotoURL-HighRes}" class="{block:Exif}exif-yes {/block:Exif}{block:Caption}caption-yes{/block:Caption}" {block:Exif}data-camera="{block:Camera}{Camera}{/block:Camera}" data-iso="{block:ISO}{ISO}{/block:ISO}" data-aperture="{block:Aperture}{Aperture}{/block:Aperture}" data-exposure="{block:Exposure}{Exposure}{/block:Exposure}" data-focal="{block:FocalLength}{FocalLength}{/block:FocalLength}"{/block:Exif} {block:Caption}data-caption="{Caption}"{/block:Caption}>
</a>
</div>
<div class="icons">
<a rel="prettyPhoto" class="view" rel="post-{PostID}" href="{PhotoURL-HighRes}"><span class="zoom">Zoom</span></a>
<span class="info">Info</span>
</div>
</div>
{/block:Photos}
</div><!-- close SLIDESHOW -->
<div class="caption">{block:Caption}{Caption}{/block:Caption}</div>
{/block:Photoset}
{block:Quote}
<div class="quote_title"><h2>"{Quote}"</h2></div>
<div class="caption"><p>{block:Source}- {Source}{/block:Source}</p></div>
{/block:Quote}
{block:Text}
{block:Title}<div class="post_title"><h2>{Title}</h2></div>{/block:Title}
<div class="caption">{Body}</div>
{/block:Text}
{block:Video}
<div class="video_post">
<figure><div class="embed">{Video-500}</div></figure>
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
</div>
{/block:Video}
</div>
</article>
{/block:Posts}

Answer 1

The Javascript will generate hard-pixels for the left-margin, depending on the width of browser window. Change the hard pixels to 50%.
jQuery:
$(this).css("left", "50%");