워드 프레스 반응 레이아웃의 추가 '공백'

Question

최근에 Gridly 워드 프레스 테마 (반응 형)를 다운로드했으며 css 미디어 쿼리를 사용하여 다양한 너비 (1020px, 610px, 480px, 320px)의 레이아웃을 조정할 수있었습니다.

내 페이지 here을 참조하십시오.

그리드는 1020px에서 610px 및 610px에서 480px로 창을 최소화 할 때 부드럽게 재정렬됩니다. '문제'는 480px에서 320px로 전환 할 때 발생합니다. 추천 이미지 아래에 여분의 공간이있어 하나의 포스트 이미지와 다음 이미지 사이에 커다란 차이가 생기는 것입니다. 가로보기에서 세로보기로 회전 할 때 내 노트북의 브라우저와 iPhone에서이 문제가 발생합니다.

이미지가 겹치는 이번에 만 320px에서 480px로 전환 할 때도 동일한 문제가 발생합니다 (세로에서 가로로 iPhone 회전).

누군가이 문제를 일으킬 수있는 아이디어가 있습니까?

나는 미디어 쿼리, PHP 및 워드 프레스 테마를 일반적으로 사용자 정의하기에 새로운 편이어서 일부 기본 코딩 요소가 누락되었을 수 있습니다.

은 <div class="post">의 인라인 스타일을 추가하고, 마른 창으로 일을 리플 로우하는 노력에 사전 :

Answer 1

JQuery와 벽돌 플러그인에 매우 감사합니다. 해당 플러그인을 수정 (또는 특정 화면 너비 아래에서 사용 중지)하지 않으면 해당 미디어 쿼리에서 해당 스타일을 해킹 할 수 있습니다.

#post-area .post { 
    float: left; 
    top: auto ! important; 
    display: block; 
    position: relative ! important; 
} 

이 this answer에 따르면, Isotope plugin는 미디어 쿼리 크기를 조절하기위한 벽돌보다 더 잘 작동 될 수 있습니다 트릭을 할 것 같은 것을 같은 날 보인다.