Disqus and the Twenty Sixteen WordPress theme

Many WordPress sites use the Disqus Comment System because it’s powerful, social, and adds some features not available with the standard WordPress comment system.¹I sometimes use Disqus here at brentlogan.com. I installed it briefly while I tested it with Twenty Sixteen.

Twenty Sixteen Is Not Designed For Disqus

Unfortunately, the Twenty Sixteen WordPress theme²Twenty Sixteen is still in development and will released before the end of 2015. is not designed for Disqus. On narrow screens like smartphones, Twenty Sixteen displays Disqus full width against the left and right edges of the screen, which doesn’t match the layout of Twenty Sixteen. If you want Disqus to look good, you’ll need to make a slight tweak.

A Simple Fix

Fortunately, making Disqus fit in with the rest of Twenty Sixteen is simple. Just add the following CSS to your site:

#disqus_thread {
    margin: 0 7.6923% 3.5em;
}
@media screen and (min-width: 56.875em) {
    #disqus_thread {
        margin: inherit;
    }
}

This CSS makes Disqus match the margins for the rest of your site. Disqus looks good at all screen widths, even on smartphones.

Adding the CSS

There are many ways to add CSS to your WordPress site, but a couple of the easiest are the Custom CSS module in the JetPack by WordPress.com plugin³If you’re not already using JetPack, I wouldn’t recommend it just for adding CSS. That would be overkill. and the Simple Custom CSS plugin. Both of these plugins document how to add CSS to your site.

More advanced WordPress users might choose to use a child theme.

Good luck!

• 1
  I sometimes use Disqus here at brentlogan.com. I installed it briefly while I tested it with Twenty Sixteen.
• 2
  Twenty Sixteen is still in development and will released before the end of 2015.
• 3
  If you’re not already using JetPack, I wouldn’t recommend it just for adding CSS. That would be overkill.