CODEWITHSUNDEEP
csswordpress
Brett
Brett

Reputation: 887

CSS Grid Layout Issue

The following site uses the Genesis Framework and a child them (if it matters) and I'm getting a weird issue with the grid layout for the blog archive page.

Here is the page: https://foralles.com/community/

It is skipping the first column in the second row. What is weird is it isn't doing this on the second/third/etc. pages of the archive.

In further weirdness, it isn't doing this in Chrome but is in FF, Safari and IE.

I've deleted the posts before and after the empty column and nothing changes.

This also wasn't happening until recently and I'm not sure what changed.

Given that it works in Chrome and on the subsequent archive pages makes me think it is some CSS issue but I can't figure it out...any help would be greatly appreciate.

Here is my code:

<?php

/**
 * Template Name: Blog
 * This is your custom Archive page for the Swank Theme.
 */

//* Show page content above posts
add_action( 'genesis_loop', 'genesis_standard_loop', 5 );

//* Add the featured image after post title
add_action( 'genesis_entry_header', 'foralles_grid' );
function foralles_grid() {

    if ( has_post_thumbnail() ){
        echo '<div class="archive-featured-image">';
        echo '<a href="' . get_permalink() .'" title="' . the_title_attribute( 'echo=0' ) . '">';
        echo get_the_post_thumbnail($thumbnail->ID);
        echo '</a>';
        echo '<a href="' . get_permalink() .'" title="' . the_title_attribute( 'echo=0' ) . '">';
        echo the_title( '<h2>', '</h2>' );
        echo '</a>';
        echo '</div>';
    }

}

//* Remove the ad widget
remove_action( 'genesis_before_loop', 'adspace_before_loop' );

//* Remove author box
remove_action( 'genesis_after_entry', 'genesis_do_author_box_single', 8 );

//* Remove the post meta function
remove_action( 'genesis_entry_footer', 'genesis_post_meta' );

//* Remove the post info function
remove_action( 'genesis_entry_header', 'genesis_post_info', 12 );

//* Force full width content layout
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );

//* Remove the entry title (requires HTML5 theme support)
remove_action( 'genesis_entry_header', 'genesis_do_post_title' );

//* Remove the post content
remove_action( 'genesis_entry_content', 'genesis_do_post_content' );

//* Add Page Heading and Content
add_action( 'genesis_before_loop', 'community_heading' );
function community_heading() {
?>
<h1>Community</h1>
<p>We built our Community page to share ideas, stories and inspiration. We’re sure you will find something that interests you and connects you to For Alles. Please enjoy exploring and reading. If there is anything you would like us to know please <a href="http://www.foralles.com/contact">contact us</a>. We’d love to hear what you think!</p>
<?php
}

genesis();

Upvotes: 0

Views: 57

Answers (1)

Sphinx
Sphinx

Reputation: 956

You need to use the min-height attribute. Edit the CSS as follows

.page-template-page_blog article.type-post, .archive article.type-post {
    width: 33.33%;
    float: left;
    min-height: 450px;
}

This makes sure all the articles have a minimum height set, the problem arises when one item is bigger then another height wise and this takes up the area below it. This change can be made on the style.css file on line 881

Upvotes: 1

Related Questions