Horizontal scrolling issue

HTML & CSS
1

I have a site that’s live right now where I made a bunch of changes and now there is a horizontal scrolling issue. I have done some troubleshooting and I think it’s the “Info” section (#contact) near the bottom where the contact information is. If I pull that out most of the horizontal scrolling goes away. But when I inspect all the divs I can’t find anything that is causing it.

Here is a link to the live site

2

You use BootStrap, and the horizontal scroll seems to be caused by the grid syatem BS use. The cause is the rows have negative margins that is meant to be soaked up by padding on the columns. You don’t have that column padding.

Please check up how the grid works:

1 Like
3

wouldn’t adding more padding push it out more?

4

No, the padding is like a “buffer zone” that provides space equal to the margins so they extend into the paddings and being “soaked up”.

Read the Bootstrap manual or check the link I gave. :slight_smile:

1 Like
5

No as Erik Said the structure of bootstrap is of critical importance and you cannot stray from the grid unless you account for the methods that bootstrap imposes on its classes.

Here is one example where you have gone wrong.

<header class="hero">
    <div class="">
       <div class="row">
        <div class="col-md-12">
          <div class="content text-center">
            <h1 class="outline pink aos-init aos-animate" data-aos="fade-up-left">The Show <span class="white">Must Go On</span></h1>
            <h4 class="work1 white aos-init aos-animate" data-aos="fade-up-right"><em>Back and better than ever, baby!</em></h4>
          </div><!-- >close content -->
        </div><!-- close col -->
      </div><!-- close row -->
    </div><!-- close container -->
   
  </header>

You have used .row which must be a direct child of a .container parent. The .container class has 15px left and right padding which soaks up the 15px negative margins applied to to .row by default. Without the container parent your .rows becomes 15px too wide for whatever context it lies in thus creating a horizontal scroll.

The container , row and column classes must be followed rigidly in the bootstrap grid and is clearly explained in the docs :slight_smile: This methology is the basics of the bootstrap grid and how it accounts for gutters properly.

You have made the same mistake a number of times through that page and you can easily test by using the devtools and setting sections to display:none in the tools panel and you will see that the horizontal scroll doesn’t disappear until you make the whole page almost blank :slight_smile:

Have a go and see if you can find the rest of the problems yourself and if you get stuck I’ll point out the other specific items to look at :wink:

2 Likes
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.