How To Hide Sidebar On Mobile Devices In WordPress

One of the most annoying aspects for mobile device users who use your website is how you handle the sidebar. For example, in responsive web design, your website looks more or less the same across all platforms. Therefore, one of the most common issues with this type of web design is how mobile interfaces handle the sidebar. The advantage of responsive design is it allows companies to keep their user experience nearly identical across all platforms. However, there are times when having all the content the same across all platforms does not make sense. It ends up hurting website performance. This is very common with sidebars as most websites simply load their sidebar at the end of their post. The sidebar is usually filled with widgets and other content that most mobile users do not care about. By removing the sidebar you have the opportunity to make better use of your article space and improve the load time of your website. There is one method to fix this that works, but I do not recommend it. The problem with this method is that it keeps your website from loading quickly. It involves using the display: none tag in CSS. This simply hides the sidebar. I myself have been guilty of doing this in the past. However, the more I look at it, there are more disadvantages than advantages to this method. The display: none tag simply prevents the browser from displaying the element but all the content is still loaded. Meaning if you have your Facebook Widgets and Twitter Feed all loading in your sidebar, your site will still be slow for mobile users because they still need to load all that content. Essentially, it is bad user experience and there are better options out there that fix the issue. So what are those options? You can use CSS, however using PHP is the better option.

How To Hide Sidebar On Mobile Devices With CSS

You can still use the CSS method if you are too worried about the method below this one. All you need to do is determine what the class is for your sidebar area. Let's take https://www.thedailyexposition.com for example. The class is actually titled .sidebar which makes things easy to find.  We need to determine what our cut off point going to be, for most websites this will work just fine.