0

On our blog, only one page is responsive. All other pages are not reorganized when they we access them. I checked all of the settings and searched the web for a while but I could not find a hint about why this happens.

Here's the page that works: http://blog.tryd.com.br/archives/4494

Any other page looks wrong on cell phones.

Any ideas of why is it happening?

  • 1
    Better aimed at theme's developers/support. – Rarst Nov 25 '16 at 14:30
1

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;
}
  • 1
    ... But, yeah, this question is probably better placed in stackoverflow.com, as it is a generic CSS question, rather than specifically WordPress. – Dan. Nov 25 '16 at 14:53
1

On the site that works responsively you have the stylesheetdcd6b.css which handles the responsive look of your website. On all the other pages it is missing. Enqueue dcd6b.css and it should work.

  • 1
    The CSS required is in 5d70a.css which is included in the pages that aren't currenlty being responsive. The problem is that the body does not have the required class mobile. – Dan. Nov 25 '16 at 14:57
  • 1
    Yes, but 5d70a.css doesn't have the media query @media (max-width: 1100px) which sets the width to auto. – newjonnydepony Nov 25 '16 at 15:02
  • 1
    @Dan you are right. Adding the class mobile to the body will fix the problem. – newjonnydepony Nov 25 '16 at 15:07
  • 1
    You're also correct, sorry I didn't see that @media (max-width: 1100px) isn't in that CSS file. But yeah, adding mobile class to body does fix it. Must be other CSS somewhere in that file. – Dan. Nov 25 '16 at 15:11
  • Thanks for the answers. As suggested, I searched on the theme's support forum and found a hint there that led me to the solution. It had something to do with the CSS minifier plugin and page caching. I cleared the cache and the mobile pages are back to normal. – Mario Marinato Nov 28 '16 at 11:13

Not the answer you're looking for? Browse other questions tagged or ask your own question.