Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress From Bootstrap to WordPress Create Bootstrap Styled Theme Templates From Bootstrap to WordPress Template: Part 2

ahmad abdolsaheb
ahmad abdolsaheb
16,985 Points
Posted by ahmad abdolsaheb
ahmad abdolsaheb
16,985 Points

links on Bootstrap's nested columns not working when on small screen.

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.

note:

when on small screens the links on the last nested columns always work regardless of how many columns there are. 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>