Upon visiting this website, you may notice a horizontal scrollbar. This issue seems to only occur on pages with a comments section, specifically within the
<div id="commentsbackground">I desire to maintain the current style and appearance, while eliminating the presence of the scrollbar.
<div id="commentsbackground">
<section class="comment">
<section class="commentsMain"></section>
<section class="fbcommentbox"></section>
</section>
</div>
The CSS code is as follows:
#commentsbackground {
width: 6000px;
margin-left: -1172px;
background-color: #EAECF3;
overflow: auto;
section.comment {
height: 500px;
margin-left: 1172px;
margin-top: 20px;
.commentsMain {
width: 500px;
padding-left: 20px;
float: left;
border-right: 1px solid rgba(0,0,0,.13);
padding-right: 20px;
background-color: #E8E8E9;
padding-top: 10px;
.fbcommentbox {
width: 434px;
float: left;
margin-left: 0px;
background-color: #E8E8E9;
padding-left: 15px;
padding-top: 10px;
If I remove margin-left: -1172px; from #commentsbackground and also remove margin-left: 1172px; from section.comment, the scrollbar persists but the white space appears on the left side. Removing width: 6000px; causes the two comment boxes to break and white space to appear on the right side as well.
If I solely eliminate width: 6000px; while retaining the margins, it results in breaking the layout and white spacing on the right side.
Finding a solution has been challenging due to the positioning of
<div id="commentsbackground"><section class="middle_single"><div id="commentsbackground">Any assistance would be greatly appreciated.
[EDIT] - Recently, I attempted relocating the entire comment box to the footer.php file just before the footer-bottom div. Although this initially resolved the scrollbar issue, it caused additional problems such as displaying the comments box everywhere, even on pages where comments were disabled via wp-admin settings. Hence, this solution did not prove to be suitable for my needs.