Hack grid- código responsivo

Views:
<link href='https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600' rel='stylesheet' type='text/css'/>

<script src='http://code.jquery.com/jquery-1.9.1.js'/>

<b:if cond='data:blog.pageType != &quot;item&quot;'><b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>//<![CDATA[
function hideLightbox(){for(var a=document.getElementsByTagName("img"),b=0;b<a.length;++b)a[b].onmouseover=function(){var a=this.parentNode.innerHTML;this.parentNode.innerHTML=a,this.onmouseover=null}}$(document).ready(function(){var a=350,b=330,c="http://3.bp.blogspot.com/-7Ie-cUwxWB4/U2KIRWgvpNI/AAAAAAAAIfU/Mj6qpg5S2fk/w500-h330-c/no-thumb.png",d=1;$(".post-body").each(function(e,f){var f=$(f),g=$(f).find("img").first(),h=f.parent().find("h3 a"),i=h.attr("href"),j=h.text();if($(h).remove(),f.empty(),g.attr("src")){var k=g.attr("height"),l=g.attr("width"),m=$(g).parent();if(f.append(m),d)g.attr({src:g.attr("src").replace(/s\B\d{3,4}/,"w500-h330-c")}),g.removeAttr("width").removeAttr("height");else{g.attr({src:g.attr("src").replace(/s\B\d{3,4}/,"s"+a)}),g.removeAttr("width");var n=(k/l*a).toFixed(0);g.attr("height",n)}}else var g=$("<img>").attr("src",c),m=$("<a>").append(g).appendTo(f);m.attr("href",i).css("clear","none").css("margin-left","0").css("margin-right","0").addClass("postThumbnail");var o=$("<div>").prepend(j).css("opacity","0.9").css("filter","alpha(opacity=0.9)").appendTo(m);o.height();o.css("margin-top","-28px"),f.css("height",b).css("overflow","hidden")}),$("#blog-pager").css("clear","both")}),window.addEventListener?window.addEventListener("load",hideLightbox,void 0):window.attachEvent("onload",hideLightbox);
//]]>
</script>

<style type='text/css'>
.post {
width:45%;
height: auto;
float:left;
display:inline-block;
border-bottom: medium none;
margin: 0 2% 1%;
padding-bottom: 3em !important;
}
h2.date-header,.post-footer {display: none;}
.date-header{visibility:hidden;height:0!important;width:0!important;margin:0!important;padding:0!important}
h3.post-title, .comments h4,.post-header{margin:0;}
.postThumbnail:hover {text-decoration:none;}
a.postThumbnail div {
text-decoration: none;
margin-top: 0 !important;
padding: 0 !important;
color: #000; /* COR DO TÍTULO DO POST */
text-align: center !important;
font: 19px &quot;Montserrat&quot;,Trebuchet,Verdana,sans-serif; /* TAMANHO E FONTE DO TÍTULO DO POST*/
text-transform: none;
background: transparent;
}

.postThumbnail{width:100%;}
.postThumbnail:hover div {
display: block;
}
.postThumbnail img {
width:100%;
border: medium none;
padding: 0px;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.postThumbnail img:hover {
-ms-filter: &quot;progid: DXImageTransform.Microsoft.Alpha(Opacity=70)&quot;;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
}

/* MEDIA QUERIES- DEFINE A RESPONSIVIDADE NA PÁGINA INICIAL
----------------------------------------------- */
@media screen and (max-width : 1152px) {
.post {margin-bottom: -45px !important;}
}
@media screen and (max-width : 1024px) {
.post {margin-bottom: -55px !important;}
a.postThumbnail div {width:95% !important; padding: 5px;}
}
@media screen and (max-width : 900px) {
  .post{width:48%;margin: 0 1% 3%; }
a.postThumbnail div {text-align: center !important;
font: 14px &quot;Montserrat&quot;,Trebuchet,Verdana,sans-serif;width:95% !important; padding: 5px;}
}
@media screen and (max-width : 800px) {
  .post{}
}
@media screen and (max-width : 480px) {
.post {width:104%;padding-bottom: 7em !important;margin-left: -0.1em;}
}
@media screen and (max-width : 414px) {
  .post {padding-bottom: 5em !important;margin-left: 0.3em;}
}
@media screen and (max-width : 375px) {
.post{width:107%; margin-left: 0 !important; padding-bottom: 3em !important;}
}
@media screen and (max-width : 360px) {
  .post{ width:109%; padding-bottom: 2em !important; margin-left: -0.010em;}
}
@media screen and (max-width : 320px) {
  .post{width:110% !important; padding-bottom: 1em !important;}
}
</style>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
.post-outer {
background: #ffffff; /* COR DE FUNDO DA POSTAGEM */
padding-top: 10px; /* Espaço do topo */
padding-left: 15px; /* Espaço da esquerda */
padding-right: 15px; /* Espaço da direita */
padding-bottom: 10px; /* Espaço de baixo */
margin-left: -4px;
margin-right: 5px;
margin-top: 5px;
margin-bottom: 30px;
}
.post-body img{margin-top:10px;padding: 5px; margin-left: -1em;float: center !important;width:auto;height:auto;}
</style>
</b:if>

Formulário de contato

Nome

E-mail *

Mensagem *

Home Sobre mim Tutoriais Loja de templates Portfólio Fanpage