Menu icon Foundation

My Posts




  • 5
    Replies
  • Nested Equalizer

    By Sean Turtle

    Equalizer

    Hi there I've got a situation where I have two divs that need to be equal height, within a row of three that need to be equal height. After the initial setup of the row of three, whenever I try and apply it to the two divs, that works fine, but it t... (continued)

    Last Reply by Arthur de la Rocha over 2 years ago





My Comments

Sean Turtle commented on Sean Turtle's post over 2 years

That worked a treat sankhabanerjee, thanks!

Sean Turtle commented on Sean Turtle's post over 2 years

<div class="row" data-equalizer>
    <div class="medium-4 columns s-mb-10">
      <div class="panel primary remove-padding" data-equalizer-watch>
        <h5>WWI Commemoration</h5>
        <img src="<?php bloginfo('template_url');?>/img/article-3-image-1.jpg" class="m-5" alt="">
        <p class="mt-10">Curabitur congue ipsum sed rutrum tincidunt. Vivamus at lectus a lorem gravida fringilla <a href="#" class="text-link">Find out more</a>.</p>
      </div>
    </div>
    <div class="medium-4 columns s-mb-10" id="vacancies">
      <div class="panel accent" data-equalizer-watch>
        <h5>Vacancies</h5>
        <div class="row" ***THIS NEEDS TO BE DATA-EQUALIZER>
        <?php

                  // The Query
                  $the_query = new WP_Query(array(
                    'post_type' => 'vacancies',
                    'tax_query' => array (
                        array (
                          'taxonomy' => 'vacancy_type',
                          'field' => 'slug',
                          'terms' => 'parish'
                          )
                      ),
                    'posts_per_page' => 1
                  ));

                  // The Loop
                  if ( $the_query->have_posts() ) {
                    while ( $the_query->have_posts() ) {
                      $the_query->the_post();?>
                        <div class="small-6 columns">
                <div class="panel" *** THIS NEEDS TO BE DATA-EQUALIZER-WATCH>
                  <h5>Parishes</h5>
                  <h6 id="<?php the_ID(); ?>"><?php the_title();?></h6>
                  <?php the_excerpt();?><a href="<?php the_permalink();?>" class="text-link">Find out more</a>
                </div>
              </div>
                    <?}
                  } else {
                    // no posts found
                  }
                  /* Restore original Post Data */
                  wp_reset_postdata();
                ?>
                <?php

                  // The Query
                  $the_query = new WP_Query(array(
                    'post_type' => 'vacancies',
                    'tax_query' => array (
                        array (
                          'taxonomy' => 'vacancy_type',
                          'field' => 'slug',
                          'terms' => 'non-parish'
                          )
                      ),
                    'posts_per_page' => 1
                    ));

                  // The Loop
                  if ( $the_query->have_posts() ) {
                    while ( $the_query->have_posts() ) {
                      $the_query->the_post();?>
                        <div class="small-6 columns">
                <div class="panel" *** THIS NEEDS TO BE DATA-EQUALIZER-WATCH>
                  <h5>Non-parishes</h5>
                  <h6 id="<?php the_ID(); ?>"><?php the_title();?></h6>
                  <?php the_excerpt();?><a href="<?php the_permalink();?>" class="text-link">Find out more</a>
                </div>
              </div>
                    <?}
                  } else {
                    // no posts found
                  }
                  /* Restore original Post Data */
                  wp_reset_postdata();
                ?>
        </div>
      </div>
    </div>
    <div class="medium-4 columns s-mb-10">
      <div class="panel announcements" data-equalizer-watch>
        <h5>Announcements</h5>
        <?php

                  // The Query
                  $the_query = new WP_Query(array(
                    'post_type' => 'announcements',
                    'posts_per_page' => 1
                  ));

                  // The Loop
                  if ( $the_query->have_posts() ) {
                    while ( $the_query->have_posts() ) {
                      $the_query->the_post();?>
                          <h4 id="<?php the_ID(); ?>"><?php the_title();?></h6>
                <?php the_excerpt();?>
                          <p><a href="<?php the_permalink();?>" class="button bottom">Find out more</a></p>
                    <?}
                  } else {
                    // no posts found
                  }
                  /* Restore original Post Data */
                  wp_reset_postdata();
                ?>
      </div>
    </div>
  </div>

Sean Turtle commented on Ashwin Khurana's post about 3 years

Hi there

I struggled with this for weeks, and found that if you enter

"sudo gem uninstall compass / sudo gem uninstall sass"

it works (finally). Hope it helps!

Posts Followed

No Content

Following

    No Content

Followers

My Posts

My Comments

You commented on Sean Turtle's post over 2 years

That worked a treat sankhabanerjee, thanks!

You commented on Sean Turtle's post over 2 years

<div class="row" data-equalizer>
    <div class="medium-4 columns s-mb-10">
      <div class="panel primary remove-padding" data-equalizer-watch>
        <h5>WWI Commemoration</h5>
        <img src="<?php bloginfo('template_url');?>/img/article-3-image-1.jpg" class="m-5" alt="">
        <p class="mt-10">Curabitur congue ipsum sed rutrum tincidunt. Vivamus at lectus a lorem gravida fringilla <a href="#" class="text-link">Find out more</a>.</p>
      </div>
    </div>
    <div class="medium-4 columns s-mb-10" id="vacancies">
      <div class="panel accent" data-equalizer-watch>
        <h5>Vacancies</h5>
        <div class="row" ***THIS NEEDS TO BE DATA-EQUALIZER>
        <?php

                  // The Query
                  $the_query = new WP_Query(array(
                    'post_type' => 'vacancies',
                    'tax_query' => array (
                        array (
                          'taxonomy' => 'vacancy_type',
                          'field' => 'slug',
                          'terms' => 'parish'
                          )
                      ),
                    'posts_per_page' => 1
                  ));

                  // The Loop
                  if ( $the_query->have_posts() ) {
                    while ( $the_query->have_posts() ) {
                      $the_query->the_post();?>
                        <div class="small-6 columns">
                <div class="panel" *** THIS NEEDS TO BE DATA-EQUALIZER-WATCH>
                  <h5>Parishes</h5>
                  <h6 id="<?php the_ID(); ?>"><?php the_title();?></h6>
                  <?php the_excerpt();?><a href="<?php the_permalink();?>" class="text-link">Find out more</a>
                </div>
              </div>
                    <?}
                  } else {
                    // no posts found
                  }
                  /* Restore original Post Data */
                  wp_reset_postdata();
                ?>
                <?php

                  // The Query
                  $the_query = new WP_Query(array(
                    'post_type' => 'vacancies',
                    'tax_query' => array (
                        array (
                          'taxonomy' => 'vacancy_type',
                          'field' => 'slug',
                          'terms' => 'non-parish'
                          )
                      ),
                    'posts_per_page' => 1
                    ));

                  // The Loop
                  if ( $the_query->have_posts() ) {
                    while ( $the_query->have_posts() ) {
                      $the_query->the_post();?>
                        <div class="small-6 columns">
                <div class="panel" *** THIS NEEDS TO BE DATA-EQUALIZER-WATCH>
                  <h5>Non-parishes</h5>
                  <h6 id="<?php the_ID(); ?>"><?php the_title();?></h6>
                  <?php the_excerpt();?><a href="<?php the_permalink();?>" class="text-link">Find out more</a>
                </div>
              </div>
                    <?}
                  } else {
                    // no posts found
                  }
                  /* Restore original Post Data */
                  wp_reset_postdata();
                ?>
        </div>
      </div>
    </div>
    <div class="medium-4 columns s-mb-10">
      <div class="panel announcements" data-equalizer-watch>
        <h5>Announcements</h5>
        <?php

                  // The Query
                  $the_query = new WP_Query(array(
                    'post_type' => 'announcements',
                    'posts_per_page' => 1
                  ));

                  // The Loop
                  if ( $the_query->have_posts() ) {
                    while ( $the_query->have_posts() ) {
                      $the_query->the_post();?>
                          <h4 id="<?php the_ID(); ?>"><?php the_title();?></h6>
                <?php the_excerpt();?>
                          <p><a href="<?php the_permalink();?>" class="button bottom">Find out more</a></p>
                    <?}
                  } else {
                    // no posts found
                  }
                  /* Restore original Post Data */
                  wp_reset_postdata();
                ?>
      </div>
    </div>
  </div>

You commented on Ashwin Khurana's post about 3 years

Hi there

I struggled with this for weeks, and found that if you enter

"sudo gem uninstall compass / sudo gem uninstall sass"

it works (finally). Hope it helps!

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content