links on Bootstrap’s nested columns not working when on small screen

3 Views

I’m trying to have my columns take the complete width of the screen in small screens and divide their content in two columns.

The following structure does that in small screens, but the links on the nested columns don’t work when there are more than one column.

Read More

note:

  1. when on small screens the links on the last nested columns always work regardless of how many columns there are.
  2. If the columns are filled with the same content of the first column, the links work on small screens.

I really appreciate your help.

Here are my nested columns: 

<div class="container ">
  <!-- Example row of columns -->
  <div class="row reading-field">
    <div class="col-md-4">
      <div><h2 class="center">Recent<h2></div>
      <?php
        $postslist = get_posts('numberposts=2&category=-5');
        foreach ($postslist as $post) :
          setup_postdata($post);
      ?>
      <div class="post col-sm-6 ">
        <h3 class="center"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
        </h3>
        <p> <?php the_excerpt(); ?> <p>
      </div>
      <?php endforeach ?> 
    </div>

    <div class="col-md-4">
      <div>
        <h2 class="center">Media<h2>
      </div>
      <?php
        $postslist = get_posts('numberposts=2&offset=0&category=5');
        foreach ($postslist as $post) :
          setup_postdata($post);
      ?>
      <div class="post col-sm-6 center">
        <h3>
          <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
        </h3>
        <p> <?php the_excerpt(); ?> <p>
      </div>
      <?php endforeach ?>
    </div>
  </div>
</div>
Post Views: 3

Related posts

Leave a Reply

1 comment

  1. This seems to be using Bootstrap (judging by the class names).

    You are nesting your columns incorrectly. You can’t directly nest a column inside a column. You need to nest a column inside a row inside a column:

    <div class="container ">
  <!-- Example row of columns -->
  <div class="row reading-field">
    <div class="col-md-4">
      <div class="row">  <!-- ***** This was missing ***** -->
        <div><h2 class="center">Recent<h2></div>
        <?php
          $postslist = get_posts('numberposts=2&category=-5');
          foreach ($postslist as $post) :
            setup_postdata($post);
        ?>
        <div class="post col-sm-6 ">
          <h3 class="center"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
          </h3>
          <p> <?php the_excerpt(); ?> <p>
        </div>
        <?php endforeach ?> 
      </div>    <!-- ***** and don't forget the extra closing tag ***** -->
    </div>
  </div>
</div>