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

PHP

Posted by Spen Taylor
Spen Taylor
13,027 Points

PHP - Media Queries or Similar

Hi guys!

I'm working on a products page and thus far have it programmed in such a way that the page renders according to two variables ($productsInBlock and $productsInPage) which I hope to set dynamically depending on the size of the user's screen.

I was just wondering if anybody has had experience with setting variables depending on screen size?

Thanks in Advance, Spen

2 Answers

Matt Campbell
Matt Campbell
9,767 Points
Matt Campbell
Matt Campbell
9,767 Points

HI Spen Taylor, I'm sure it's possible by why not just use CSS to select the children of the containing parent div and set them to dispaly none in CSS?

Spen Taylor
Spen Taylor
13,027 Points

That would make things much easier! Trouble is my structure really wouldn't allow it - yikes!

Here's my page so far, theres still a few issues that need sorting out - I'm currently fixing the issue on the last page of products so at least that'll be one step closer :P

As you can probabily see, the page is made up of blocks of 6 with a preview/ detail section to the left or the right of that block. Using CSS would mess heavily with this I'm sure and I'd have issues going from page to page and ensuring the correct products show up on each one.

P.S. please forgive the stupid product images! they're there for test purposes only - although I'm tempted to print the Lamar one ha!

Matt Campbell
Matt Campbell
9,767 Points

What about this for smaller screens?

Shrink the preview images A LOT and have 3 down either side of the larger image? Keeps the balance and retains the large image largeness without compromise to the overall effect?

Spen Taylor
Spen Taylor
13,027 Points

For smart phones I'd use a CSS media query to just hide the preview, since it only works with mouse over's anyway, likely the same deal for tablets too

Matthew Ong
Matthew Ong
6,041 Points
Matthew Ong
Matthew Ong
6,041 Points

You can't get the user's screen size using php since php is strictly server side. If you really want to use php you could detect their screen size using javascript with window.screen.width and window.screen.height and submit it with ajax to a php form, but I doubt that is necessary.

Spen Taylor
Spen Taylor
13,027 Points

Good point, I don't know why I didn't put two and two together there, perhaps just hiding the preview with CSS and tweaking the CSS for the thumbnails will have to do!