[Resolved] Frontpage cards grid messed up after update

[Alvaro]

Hi,

I use a cards grid on the frontpage for many GP versions ago. I made the mistake to update everything without double checking the grid and, now, it’s messed up and I can’t understand why.

It should be grid-25 tablet-grid-33 mobile-grid-50 in the old Unsemantic CSS (which I didn’t change), but now it seems to be adding extra styles and messing up the grid. What did I do wrong? I didn’t change any settings, just updated GP and GP Premium.

So, it should be 4 columns for desktop, 3 columns for tablet and 2 columns and 1 column for mobile. But it’s showing 2 columns on desktop.

Thanks.

Álvaro

[David]

Hi there,

that is odd, each of the Posts has duplicate grid-* classes so it has grid-25 and grid-50
Are there any custom functions being used on the site that affect grid or post classes ?

[Alvaro]

Hi David,

This frontpage card grid has element-item grid-25 tablet-grid-33 mobile-grid-50 as classes in the php template file. It’s the other grid-*that is being added by the theme, I guess as from yesterday when I updated.

The card grid code is this:

<?php
// Get item terms
$terms = wp_get_post_terms( $post->ID, 'courses_topic', array( 'fields' => 'slugs' ) );
$list_categories = NULL;

if ( !empty( $terms ) ) {
  foreach ( $terms as $term ) {
    $list_categories[] .= '' . $term . '';
  }
  $joined_categories = join( ' ', $list_categories );
}

// Serve the right thumbnail size
$thumb_size = resized_thumbnail( 346, 195, true, false, true );
?>

<article id="item-<?php the_ID(); ?>" <?php post_class( 'element-item grid-25 tablet-grid-33 mobile-grid-50 ' . $joined_categories ); ?>>

  <?php $image_attributes = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' ); ?>

  <?php
  $course_duration  = get_post_meta( get_the_ID(), '_empform_course_duration', true );
  $course_total_cost = get_post_meta( get_the_ID(), '_empform_course_total_cost', true );
  $course_badge = get_post_meta( get_the_ID(), '_empform_course_badge', true );
  ?>

  <div class="ui centered card course-item has-badge">
    <a class="image" href="<?php the_permalink(); ?>">
      <?php echo $thumb_size; ?>
    </a>
      <?php if ( !empty( $course_badge ) && $course_badge !== 'none' ) {
        echo '<span class="badge-overlay circle">' . $course_badge . '</span>';
      }
      ?>
    <div class="content">
      <a class="header" href="<?php the_permalink(); ?>"><?php the_title( '<h2>', '</h2>' ); ?></a>

      <?php
      $terms = get_the_terms( $post->ID, 'courses_schedule' );

      if ( !empty( $terms ) && !is_wp_error( $terms ) ) {
        echo '<p class="courses-schedule">';

        foreach ( $terms as $term ) {
          echo '<span class="ui label label-' .  $term->slug . '">' . $term->name . '</span>';
        }
        echo '</p>';
      }
      ?>

    </div>

    </div>

    </article>

The card look and effect is based of Semantic UI card view, but I’m guessing it’s an older version of it also. Anyway, I used the GP grid classes to adapt the style. This was years ago but was still working. (And I do use a staging site to test updates but I’m guessing, for some reason, maybe cache, the error was not obvious before pushing to live, my bad.)

[Alvaro]

OK, for some reason, the frontpage card grid started to use the Blog GP settings. If I change the GP Blog Columns settings in the Customiser from 2 to 4, I can see the 4 cards in the frontpage.

[David]

Was the blog module activated before? As to the best of my memory we haven’t change how we pass the grid-* classes to the post. ie. using the post_class hook.

[Alvaro]

Yes, I haven’t changed any settings.

I’m now using generate_blog_get_column_count function to specify the number of columns for the frontpage, testing it on the staging site.

But I’m not sure how to adapt for tablet and mobile. Originally it was grid-25 tablet-grid-33 mobile-grid-50, but using the above function, I get grid-25 tablet-grid-50 mobile-grid-100. Is there a way to change it?

Thanks.

[Alvaro]

Also, if changing from Floats to Flexbox is going to make it easier to adjust all this, I’m into it.

I’ve used another testing install to test for this change and see the secondary navigation and sticky navigation have issues with positioning.

[Alvaro]

Sorry. Changing from Floats to Flexbox is not an immediate option, as there are a lot of stuff to adapt. So, let’s stick to the Floats issue, for now, and deal with flexbox in a new version of this site. Thanks.

[David]

I think in this case its probably easiest to treat it with some CSS:

@media (min-width: 768px) and (max-width: 1024px) {
    .cards.grid .tablet-grid-50 {
        width: 33.33333%;
    }
}

@media (max-width: 767px) {
    .cards.grid .mobile-grid-100 {
        float: left;
        width: 50%;
    }
}

[Alvaro]

OK, I think I got it now. Thanks David, you rock!

[David]

Glad to hear that!!

[Author]

Posts