How to Hide the Twenty Ten WordPress Theme's Sidebars with CSS

This post explains how to hide the right-hand sidebars of the Twenty Ten WordPress Theme to give your main content more room, which makes reading your content easier on mobile devices.

The Twenty Ten theme has two sidebars on the right-hand side: the primary sidebar and the secondary sidebar. To hide these two sidebars, edit the Twenty Ten style.css file and set the display attribute of the <div id="primary" ... > and <div id="secondary" ... > tags to none:

#primary, #secondary {
    display: none;
}

To give your main content more room by stretching it across the space occupied by the sidebars, set the width attribute of the <div id="content" ... > tag to 900 pixels:

#content {
    width: 900px;
}

One reason for expanding your main content across the page is to make reading your website easier on mobile devices. For example, the following screenshots show this website displayed on an iPod touch. The left-hand image shows this website with the sidebars; the right-hand image shows this website without the sidebars.

iPod touch screenshot of Usability, etc. with right-hand sidebarsiPod touch screenshot of Usability, etc. without right-hand sidebars

If you want to hide the sidebars only when your website is viewed on mobile devices, wrap the above CSS in a @media handheld rule:

@media handheld {
    #primary, #secondary {
       display: none;
    }
    #content {
       width: 900px;
    }
}

The exception is iPhone and iPod touch devices, which don’t implement the @media handheld rule. There is a pure-CSS solution that works, although it’s far from ideal. The solution hard-codes the 480-pixel screen width of current iPhone and iPod touch screens into a @media rule using the max-device-width attribute:

@media only screen and (max-device-width: 480px) {
    #primary, #secondary {
       display: none;
    }
    #content {
       width: 900px;
    }
}

This rule says, “only apply the enclosed CSS when the device has a screen width of 480 pixels.” Although there seems to be a contradiction between specifying a screen width of 480 pixels and a <div id="content" ... > tag width of 900 pixels, there is in fact no contradiction. The max-device-width attribute relates to the number of pixels the device is capable of displaying. Mobile Safari scales websites down to 480 pixels wide, so the content within the 900 pixels will be scaled down to fit into 480 pixels.

blog comments powered by Disqus