How To

How To Fix Disqus Comment Width In Your WordPress Theme

I’ve been updating the theme over here at liamgreen.com and for some reason disqus wasn’t working right in my theme. As you can see from the image below.

disqus too wide

 

So i was browsing around the internet and came across this blog post “HOW TO FIX DISQUS COMMENT WIDTH ON THE WORDPRESS 2014 THEME” and they posted some CSS code on there blog post to help fit the disqus comment system neatly into your wordpress theme. Here is the code.

#disqus_thread {
padding: 12px 10px 0;
margin: 0 auto;
max-width: 100%;
}

@media screen and (min-width: 673px) {
#disqus_thread {
padding-left: 30px;
padding-right: 30px;
}
}

@media screen and (min-width: 1040px) {
#disqus_thread {
padding-left: 15px;
padding-right: 15px;
}
}

@media screen and (min-width: 1110px) {
#disqus_thread {
padding-left: 30px;
padding-right: 30px;
}
}

All you have todo is head over to your wordpress admin panel of your site. Make sure you have Jetpack installed and the Custom CSS modular activated too. Once you have that done head over to Appearance Edit CSS and enter the CSS code above and click save. Also if you want to make the width of the disqus comment system smaller. Just edit the line “max-width: 100%;” to “600px” or what ever you want. Hope this blog post helps you get disqus comment system looking nice in your theme just like it did with me. As you can see from the image below. Disqus now fits in perfectly.

disqus wide enough

 

This is from Chloe in the comments section:

Also keep in mind you can also use somthing like: padding-right: 300px;

This is great if you only need to push in the right side while keeping it aligned on the left. I had floating side bars that were covering the post button. So my CSS looks like this:

#disqus_thread {

padding-right: 300px;

margin: auto;

max-width: 60%;

}

Advertisements

8 thoughts on “How To Fix Disqus Comment Width In Your WordPress Theme

  1. Also keep in mind you can also use somthing like: padding-right: 300px;

    This is great if you only need to push in the right side while keeping it aligned on the left. I had floating side bars that were covering the post button. So my CSS looks like this:

    #disqus_thread {

    padding-right: 300px;

    margin: auto;

    max-width: 60%;

    }

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s