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
Jonathan Söder5,771 Points
Fetching 100 rows 2 times on one page for mobile devices then hiding half, taxing?
I'm currently thinking how to solve a problem I'm having. I have a page called top 100. On mobile devices it's horrible, because I currently have 2 movie posters per row. I am happy with the poster size on other pages. The problem only arises on the top100 page because it creates 50 rows and A LOT scrolling for the user. Which is bad.
What I want is a more compact view without posters on mobile devices. Leave out the posters and only echo one title and its score per row on mobile devices.
Since PHP is serverside I feel limited in what I can do to solve the problem because the problem lies in detecting user device/resolution. As of now I've "solved it" in a dirty ugly way, using bootstraps xs-visible.
What it solves is that it'll get rid of the posters and the scrolling. But it's not very elegant since it is only HIDING the code containing 100 posters.
Also does two queries instead of one, regardless of device,
query 1: fetches poster, title and score. -only visible on tablets and larger-
query 2(specifically for mobile): fetches title and score. -only visible on mobile devices-
I'm fetching 200 rows and hiding half of them. Is this taxing on older/newer mobile devices?
I'm really looking for one page of 100 titles. Right now I don't want any page system and if I make the posters smaller to fit 3-4 per row you can't even make out what you're clicking on.
Is this viable in any way or am I going to have to get into pagination?
I was doing a little bit of brainstorming and thought of a possible solution that might solve your dilemma.
I think doing this will prevent mobile users from loading pictures they won't even see, and gives tablet/desktop users their desired layout.
Let us know if this works!