Why is only one page responsive? [closed]

Question

I can see that the div with id of wrapper has it’s width set in the CSS.

It should have width of auto.

I can see that the page that works (the one you provided a link for), the body has a class under which the div width id wrapper has it’s width set to auto.

@media (max-width: 1100px){
    body.mobile #wrapper, 
    body.mobile #colophon, body.mobile #main, 
    body.mobile article.post, body.mobile #container, body.mobile #linky{
      width: auto;
    }
}

Actually, I can see that there are several elements that have their width set to auto, when body has the class mobile.

All other pages – body does not have the class mobile.

To answer your question in general, a block element will need it’s width set to auto or 100% or just not have it’s width set in CSS (natural width is 100%).

For your situation specifically, you need to give the body the class mobile on all pages:

<body class="mobile">

The quickest way will probably be to edit the body that in header.php.

Next quickest, but probably the ‘cleaner’ way, is to use the body class filter (put this in your theme’s functions.php, replacing ‘my_theme’ with your theme’s directory’s name):

add_filter('body_class', 'my_theme_body_classes');

function my_theme_body_classes($classes) {
    $classes[] = 'mobile';
    return $classes;
}