Looking for assistance from experienced web designers!
I am working on creating a masonry layout for my blog archive pages. I want all the posts to be the same size to form a perfect grid. The layout appears correctly in Safari, but Chrome and Firefox are causing issues. In those browsers, the columns are not aligned properly with the title in one column and the featured image overflowing into the next.
I attempted to fix this by adding {max-width:75%; height:900px;}, which resolved the problem in Chrome but created a new issue in Firefox and distorted the layout in Safari (with columns overlapping the sidebar).
Here is the link to the blog archive page:
Below is the CSS code I am currently using:
.archive #content {
column-count: 3;
column-gap: 1em;
column-rule: 0 solid #666;
-webkit-column-count: 3;
-webkit-column-gap: 1em;
-moz-column-count: 3;
-moz-column-gap: 1em;
-moz-column-rule: 0 solid #666;
-o-column-count: 3;
-o-column-gap: 1em;
-o-column-rule: 1px solid #666;
}
.archive .blog-post-wrapper {
border: solid 1px #b3b3b3;
display: block;
margin: 5px 0 25px;
padding: 5px;
}
.archive .image-wrap {
width: 220px;
height: 170px;
}
.archive .thumbnail img {
padding: 0;
height: 100%;
width: 100%;
}
.archive #content p {
display: none;
}
.archive #content .blog-big {
margin-bottom: 0 0 10px 0;
}
.archive .blog-big {
margin: 0;
padding: 0;
}
.archive h2.post-title {
background-color: #ffffff;
max-width: 100%;
display: block;
text-align: center;
padding-top: 8px;
padding-bottom: 5px;
margin: 0;
color: #fff;
text-decoration: bold;
font-family: 'questrial' !important;
height: 45px;
font-weight: bold;
line-height: 8px;
}
.archive #content h2.post-title a {
font-size: 16px;
text-decoration: bold;
}
.archive #content .socials {
display: none;
}
.archive #content .blog-signature img {
display: none;