Hope you're good, wondering if anyone can help, or at least point me in the right direction.

I've got a page with images of people on it(approx 30 people)

enter image description here

The objective is that when a user clicks on Person 1 a fact about Person 1 will appear from beneath them, when they click on Person 2, a fact about Person 2 will appear etc etc.

On desktop, I've got these split over 4 columns, on tablet 3 columns, and on mobile 2 columns.

My code is working perfectly on desktop. I've got two loops, one pulls the thumbnails of the people, and then when a counter gets to 4 a seperate loop is triggered that pulls in the corresponding divs.

Having coded this all out, I realised that when I try it on tablet or mobile it doesn't display properly. For tablet, its expecting a 3 column grid, and the Fact box appears after the 4th person making it look weird. So my next idea is to tweak the numbers. E.g if the users browser window is < 768, make sure the divs appear every 2 people, not every 4. I've used pages and number of posts in the WP_Query. I guess I'd then parse this into PHP with javascript / ajax?

Its starting to feel messy....Is this the right approach, or am I barking up the wrong tree?

Heres a sample of code for the second query

     <?php if ($counter == 4) { ?>



                $paged = (get_query_var('paged')) ? get_query_var('paged') : $no_of_rows;
                 $args2 = array( 'post_type' => 'drummers', 'orderby' => 'menu_order', 'posts_per_page' => '4', 'paged' => $paged);  

                $your_loop2 = new WP_Query( $args2 ); 

                //FETCHES THE POSTS
                if ( $your_loop2->have_posts() ) : while ( $your_loop2->have_posts() ) : 

                $post_id_inner = get_the_ID();


 <div class="col-xs-12" id= "detailrow<?php echo $post_id_inner ?>" style="display:none;"><?php the_title(); ?></div>

<?php $counter = 0; ?>

<?php endwhile; endif; wp_reset_postdata();?> <!-- INNER LOOP FINISHED -->

<?php  } ?>  
  • Rather than reinvent the wheel, you could try using Bootstrap or Foundation. It would add quite a bit of overhead to your project, but if used elsewhere in your theme it could also make it much easier to set up this type of row/column layout and easily tweak it for each screen size. – WebElaine Feb 20 '17 at 19:16
  • So this theme I'm building is actually using the Bootstrap framework already. Everything shows correctly, but when I tap on Person 1, Fact 1 appears to the right of and pushes everything down when I do it on the tablet or mobile query. Starting to think I may need to do something with rows as well... – lycrake Feb 20 '17 at 19:25
  • Yes, if you're using columns, there should be rows wrapped around them. That will prevent items from floating back up onto higher rows. [Inline Link]getbootstrap.com/css/#grid – WebElaine Feb 20 '17 at 19:33
  • So I've been playing around with this and I have the same issue, as soon as I move the browser down to tablet size, Person 4 goes onto the next row, there are then two blank spaces to the right of it, and then the four facts sit beneath that. I ideally want Person 4 to go under the facts to avoid any white space.. I ideally want to be able to use the bootstrap push/pull but to go down a row... – lycrake Feb 20 '17 at 20:55
  • Probably better to ask on regular StackOverflow or a Bootstrap-specific forum. – WebElaine Feb 20 '17 at 20:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.