change number of wp_query results for responsive design

I am just beginning to dive into responsive design with Wordpress and noticed a few things on a number of sites.  One site had 4 posts show on the homepage floated side by side on a full screen page.  As the screen size shrunk, the width of the post sizes scaled with the browser size until a point where it reduced from 4 results to 3.

As the browser continued to reduce, it shrunk the width until a certain size where it reduced to 2.  Finally, it reduced to 1 result with an arrow to scroll to the next results.

Is that a CSS design where it reduces what's displayed or something in the PHP query that returns fewer?  I'm guessing that it's CSS, but wanted to check and a few basic Google searches has not revealed much yet.

any suggestions or a link in the right direction?
LVL 2
axessJoshAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Paul WilsonCommented:
hii,
You need to set a viewport first in order to make your website responsive. See the link:https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/set-the-viewport
i think now your website becomes responsive .

Regards
0
Alicia St RoseOwner & Principle Developer/DesignerCommented:
Hello AxessJosh,
do you have a link to the site?

1. Are you building your own theme or using a framework or starter theme?
2. Are you responsively coding Mobile First?
3. Are you aware of media queries and break points?
4. Are you giving those post divs max-width: ?px or ?% and width: 100% (mobile) and shrinking that width accordingly to accommodate break points on larger screens? For instance you can have two rows of two posts after desktop through tablet, then one column on phones.

I use a conditional to hide or include different content for mobile devices etc.

If you put this in your functions.php:

/*************************************************************/
/*** RESPONSIVE CONDITIONALS ***/

// add conditional statements
function is_ipad() { // if the user is on an iPad
    $is_ipad = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPad');
    if ($is_ipad)
        return true;
    else return false;
}
function is_iphone() { // if the user is on an iPhone
    $cn_is_iphone = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPhone');
    if ($cn_is_iphone)
        return true;
    else return false;
}
function is_ipod() { // if the user is on an iPod Touch
    $cn_is_iphone = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPod');
    if ($cn_is_iphone)
        return true;
    else return false;
}
function is_ios() { // if the user is on any iOS Device
    if (is_iphone() || is_ipad() || is_ipod())
        return true;
    else return false;
}
function is_android() { // detect ALL android devices
    $is_android = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'Android');
    if ($is_android)
        return true;
    else return false;
}
function is_android_mobile() { // detect only Android phones
    $is_android   = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'Android');
    $is_android_m = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'Mobile');
    if ($is_android && $is_android_m)
        return true;
    else return false;
}
function is_android_tablet() { // detect only Android tablets
    if (is_android() && !is_android_mobile())
        return true;
    else return false;
}
function is_mobile_device() { // detect Android Phones, iPhone or iPod
    if (is_android_mobile() || is_iphone() || is_ipod())
        return true;
    else return false;
}
function is_tablet() { // detect Android Tablets and iPads
    if ((is_android() && !is_android_mobile()) || is_ipad())
        return true;
    else return false;
}

Open in new window


Then use in your template:

<?php if(is_mobile_device()) {
	get_template_part('loops/loop-mobile-posts'); 
	}?>

Open in new window


get_template_part() is refering to a template file I would have created called loop-mobile-posts.php which I placed in a loops folder. In that file I would put a loop querying only two posts. Make sure after the loop you add: <?php wp_reset_query(); ?>. This enables other loops on the page to load.

Of course you would only be able to test this on a mobile device, not by simply shrinking you browser window. So, I will add the loop directly to homepage template, style it, then throw it in the template part and call it.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.