Twentythirteen theme comment width issue

Hi sc414,

You can achieve this just changing custom css code in wpdiscuz settings page, hope this code will work for you, if not just change the properties.

Just put this css code in Custom CSS Code section in settings page

.comments-area {
    margin-left: 100px;
    max-width: 85%;
    padding: 0 376px 0 60px;
}

Thanks AdvancedCoding! I will try it out and let you know how it goes.

That worked beautifully, thanks again for your help – I’m glad it could be achieved with CSS alone.

sc414

Hello again!

I know I marked this issue as resolved, but I have realised that there may still be an issue.

I have changed the CSS as above and this works well, but it looks different in different browsers and gets messed up when you zoom in and out.

When using the Disqus plugin, you can change the following code in the comments.php file to fix the formatting:

<div id=”disqus_thread”>

to

<div id=”disqus_thread” class=”entry-content”>

Is there a similar fix I could do with the wpdiscuz plugin so that the comments section is included in the main content? I much prefer your system and would love to make it work for my site!

Thanks again for any help

sc414

Hi sc414,
Please use this css code in custom css code are instead of the one above:

.comments-area {
    display: table;
    margin: 0 auto;
    max-width: 1040px;
    padding: 0 376px 0 70px;
    width: 100%;
}

And for the comment header use this:

#wc-comment-header {
    padding: 20px 1px 1px 70px!important;
}

Never mind,
Please forget all CSS codes above and use this one, this is a has a responsive feature, this is the best solution for your case.

.comments-area {
    clear: both;
    display: block;
    margin-left: 15%;
    max-width: 1040px;
    padding: 0 25% 0 4%;
}

Thanks for the reply gVectors!

This solution works much better.

Does the second line of CSS also go into the Custom CSS code area or into my child themes style sheet?

What is the purpose of this code?

Thanks

Please ignore #6 and #7 posts.
Please use the last one I’ve posted. #8 post.

Okay, thanks for your help I will use #8.

-sc414

Hi sc414,
I see you changed display: block; to display: table;, please revert back to get correct width of comment area. It should be display: block;.

Well spotted! Thanks for your help, I will mark this thread as resolved.

-sc414

Please wait a bit we’ll test this css on other browsers and give you another more stable code.

Ok,
The last code is good on all popular browsers we’ve tested. You can keep it.

Thanks