Mitch Gillespie Mitch Gillespie - 8 months ago 31
CSS Question

How to get rid of this horizontal scroll bar

For the life of me I cant seem to get rid of the horizontal scroll bar at the bottom of this site. I have tried everything (in my ability) and was wondering if anyone could shed some light on it for me.

Thanks in advance.

Answer Source

.row.vc_custom_1488973579542 (the one with the big title) is not a direct child of a .container, but of a <section>.

Your theme uses a grid layout system based off of Bootstrap's columns, which uses left/right paddings on .containers and equal corresponding left/right negative margins on .rows. In full-width mode, not placing top level .rows inside a .container results in rows being 25px larger than the <body>, creating a horizontal scrollbar.

Possible fixes:

  • place this .row inside a .container (recommended)
  • override default row margins for it:
.row.vc_custom_1488973579542 { 
  margin-left:0;
  margin-right:0; 
}
  • hide the overflow (not recommended):
body {
  overflow-x: hidden;
}