Zurb Foundation styling and "done" after one click.

Hi,

Still having an issue with styling.

I’ve put two ALM buttons on my page for you to look at, each pulling a different template (we paid for the template folder upgrade).

First ALM

The first one uses a shortcode to call a simple repeater template that does not add one row per three content items, and uses CSS you provided to override the Foundation floats.

Shortcode

[ajax_load_more theme_repeater="load-more-stories.php"
post_type="trnn_story" offset="13" posts_per_page="12"
pause="true" scroll="false" destroy_after="36"
css_classes="row" button_label="See more stories ?"]

Template:

<div class="medium-4 columns norow">

   <?php if ( has_post_thumbnail() ) { ?>
   <a>"><?php the_post_thumbnail('block');?></a>
   <?php } ?>

   <?php echo the_terms( $post->ID, 'topics', '<div class="labels">',' ','</div>' ) ?>

   <a>"><h3><?php the_title(); ?></h3></a>

   <?php echo wp_trim_words( get_the_excerpt(), 20);?>

</div>

CSS

.alm-reveal {
  .medium-4.columns.norow {
    display: inline-block;
    float: none;
    padding-bottom: 20px;
    vertical-align: top;
    width: 33%;
  }
}

The problem here is that even with your styling addition only two of the medium-4 content items appear per ‘row’, unless I also override Foundations width setting (add “width=33%;” to the CSS). However if I manually set the width I get unwanted results on other screen sizes — it overrules Foundation’s responsiveness. Essentially the position of the second content item shift slightly when changing from float: left to display: inline-block.

Second ALM

The second one uses a shortcode to call the repeater that adds one row per three content items and uses the default Foundation styling.

<?php if($alm_item%3 == 1){echo '<div class="row">';} ?>

<div class="medium-4 columns">

  <?php if ( has_post_thumbnail() ) { ?>
    <a>"><?php the_post_thumbnail('block');?></a>
    <?php }  ?>

    <?php echo the_terms( $post->ID, 'topics', '<div class="labels">',' ','</div>' ) ?>

    <a>"><h3><?php the_title(); ?></h3></a>

    <?php echo wp_trim_words( get_the_excerpt(), 20);?>

  </div>

  <?php if($alm_item%3 == 0){ echo '</div>'; } ?>

The styling here is great and fully Zurb Foundation. The problem is the Load More button is “.done” after the first press. You said “Sometimes when a template is not opened and closed with an HTML element the plugin gets confused,” so I also tried wrapped the repeater in another div element but it didn’t help.

Website is here and login available on request.

https://www.ads-software.com/plugins/ajax-load-more/