Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

This question already has an answer here:

I am using responsive design on my website. Everything is fine except for the fact that on a mobile phone, my website is just too long. There is just too much content for a mobile screen - too much vertical space gets taken up by the sidebar which contains a lot of widgets like popular posts and recent comments and many others. To make the website smaller, I want the sidebar to not load at all if viewed from a small screen. And I don't want to apply display:hidden to the sidebar container. That would be stupid.

So the most efficient way would be to load the sidebar using AJAX and exclude it if the viewport is less than 800px wide.

Could anybody please tell me if this possible? If this can be done please give some examples and links to some tutorials. I have googled a lot for this but found just one tutorial which I think is not enough as I want to learn from several examples.

share|improve this question

marked as duplicate by toscho May 14 '13 at 10:51

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

1 Answer 1

Just go ahead and use a CSS media query to set the sidebar to display: none if the screen is too small, and provide your mobile users with some JavaScript that lets them selectively view it if they want to. Don't worry about the loss in bit-and-cycle efficiency this causes; assuming that you get no more than one tenth the number of daily hits that Facebook does, and that your sidebar isn't full of large auto-play video files, the gain from sending the sidebar on a separate request will be negligible (or even possibly negative.

share|improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.