How to Hide the Twenty Ten WordPress Theme's Sidebars with CSS20 Jun 2011
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
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:
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.
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:
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
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.