How to Remove WordPress Twenty Eleven’s Responsive Structure

By Amor


If you’re using the Twenty Eleven WordPress theme and want to remove its responsive structure there’s an easy 2-step quick fix for that. I won’t advise you to remove or delete the responsive styles in the Twenty Eleven’s style.css because  even if you do so, it will be overwritten when you update/upgrade the theme.

The smart way to edit Twenty Eleven is to use a child theme, so create one if you haven’t done so.

Step 1

In the child themes’ header.php,  remove the <meta name=”viewport” content=”width=device-width” />

twentyeleven’s header.php –

<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />

twentyeleven child theme’s header.php –

<meta charset="<?php bloginfo( 'charset' ); ?>" />

Step 2

In the child theme’s  style.css remove the max-width propery of the #page element and replace it with width.

twentyeleven’s style.css –
#page { max-width: 1000px; }

twentyeleven child theme’s style.css
#page { width: 1000px; }

Here’s a snapshot of Twenty Eleven’s code and the child theme’s code that removes the responsive structure.


Copyright © 2020 • My WordPress Playground on WordPress and Ghostbird child theme designed by Amor • 0.265 seconds query