Display a specific # of posts based on @media queries?

[kipperc]

I’m working on a site portfolio site where each portfolio piece is an individual post and the main portfolio page displays only the thumbnails of the most recent 30 posts creating grid of images 3 wide and 10 high.

I’m using @media queries to make the site responsive so as the browser window gets narrower, the images resize and shuffle around and eventually (at iPhone size) end up in a single column of images.

Here’s my question…
Im thinking that I don’t want to display 30 images in a single column on my iPhone. For the mobile experience, I’d much rather display 10 or less to avoid the crazy amount of scrolling. Is there any good way to adjust the number of posts my loop query is spitting out based on the width of the browser window?

[dfogge]

one thing to keep in mind reguarding cnwtx’s method: it will work but mobile users will still download all the hidden elements.

here’s a very simple conditional loading technique from Jeremy Keith: http://24ways.org/2011/conditional-loading-for-responsive-designs

[kipperc]

thanks for the ideas. I don’t think we’re quite on the same page. Here’s a link to the the page on my site. So you can see you the page responds to window resizing.

cjkipper.com/portfolio

[Author]

Posts