Discord To Wide For Theme? Here Is How To Fix It

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.

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 the 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 to do 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.

This is from Chloe in the comments section (From my main blog LiamGreen):

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%;

}

Leave a Reply

Your email address will not be published. Required fields are marked *