change counter value with screen size with php - php

Question

I load wordpress content in an external page. I display de content in 3 columns. I created a counter to do that. This works perfectly, except that I want to make it responsive. This works for thumbnails but not for the columns. How to change the value of 3 columns to 1 in PHP if the screen or browser size is less than 1024px ? Here is my code, I appreciate your help.
<?php
$compteur=0;
echo "<table width='100%'><tr>";
$posts = get_posts('numberposts=100&order=DESC&orderby=post_date');
foreach ($posts as $post)
{
setup_postdata( $post );
echo "<td width='30%'>";
echo "<br />";
if ( has_post_thumbnail() ) {
$image_src = wp_get_attachment_image_src( get_post_thumbnail_id(),’thumbnail’ );
echo '<img width="100%" src="' . $image_src[0] . '">';
}
echo the_date();
echo "<br /><h1>";
echo the_title();
echo "</h1>";
echo the_excerpt();
echo "<td />";
$compteur++;
if ($compteur==3)
{
echo "<tr/><tr>";
$compteur=0;
}
}
echo "<tr /><table/>" ;
?>

Answer 1

My bad, It's completly working.
Here is the code :
<div id="articles">
<?php
$compteur=0;
echo "<div width='100%'>";
echo '<div class="colonnes">';
$posts = get_posts('numberposts=100&order=DESC&orderby=post_date');
foreach ($posts as $post)
{
setup_postdata( $post );
echo '<div class="col">' . "\n";
echo "<br />";
if ( has_post_thumbnail() ) {
$image_src = wp_get_attachment_image_src( get_post_thumbnail_id(),’thumbnail’ );
echo '<img width="100%" src="' . $image_src[0] . '">';
}
echo the_date();
echo "<br /><h1>";
echo the_title();
echo "</h1>";
echo the_excerpt();
echo "</div>";
$compteur++;
if ($compteur==3)
{
echo "</div>";
echo '<div class="colonnes">';
$compteur=0;
}
}
echo "</div /></div>" ;
?>
</div>
and the css :
.colonnes{
display:block;
width: 100%;
}
.colonnes:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.col {
border: 1px solid #999999;
float: left;
width: 30%;
}
#media (max-width: 1024px) {
.col {
width: 100%;
}
}
thank you for your help.

Answer 2

Use a media query and style the cells as blocks:
#media (max-width: 1024px) {
td {
display: block;
}
}
In practice, you would probably want to give the table a class and use that class in the rule so you don't affect every table.
Also, as noted in the comment above, using div instead of table cells would be easier to deal with.
Example:
$compteur=0;
echo "<div width='100%'>";
$posts = get_posts('numberposts=100&order=DESC&orderby=post_date');
foreach ($posts as $post) {
setup_postdata( $post );
echo '<div class="col">' . "\n";
if ( has_post_thumbnail() ) {
$image_src = wp_get_attachment_image_src(get_post_thumbnail_id(),’thumbnail’ );
echo '<img width="100%" src="' . $image_src[0] . '">';
}
echo the_date();
echo "\n<h1>";
echo the_title();
echo "</h1>";
echo the_excerpt();
echo "</div>";
$compteur++;
if ($compteur==3)
{
$compteur=0;
}
}
echo "</div>" ;
Then, have CSS like:
.col {
width: 30%;
float: left;
}
#media (max-width: 1024px) {
.col {
width: 100%;
}
}

Answer 3

ok this one is working. Now I'm trying to display posts in several pages. I change my code and add a Previous/Next navigation. When I click on next, I've got a wrong link, a 404 page of my actual website. So, what is wrong please ?
<div class="navigation"><p><?php posts_nav_link(); ?></p></div>
<div id="articles">
<?php
$args = array( 'posts_per_page' => 3 );
$compteur=0;
echo '<div class="tableau">';
echo '<div class="colonnes">';
$posts = get_posts($args,'order=DESC&orderby=post_date');
foreach ($posts as $post)
{
setup_postdata( $post );
echo '<div class="col">' . "\n";
echo '<div class="img-crop">';
if ( has_post_thumbnail() ) {
echo '<a href='.post_permalink($ID).'>';
$image_src = wp_get_attachment_image_src( get_post_thumbnail_id(),’thumbnail’ );
echo '<img src="' . $image_src[0] . '">';
}
echo '</a>';
echo '</div>';
echo '<br/>';
echo '<div class="date">';
echo the_time('j F Y');
echo "</div>";
echo '<div class="title">';
echo the_title();
echo "</div>";
echo '<div class="excerpt">';
echo the_excerpt();
echo "</div>";
echo "</div>";
$compteur++;
if ($compteur==3)
{
echo "</div>";
echo '<div class="colonnes">';
$compteur=0;
}
}
echo "</div /></div>" ;
?>
</div>