Fix Horizontal Scrolling

HTML-CSS
1

Hello, I made this website as part of my portfolio.

https://airautonomo.com

here is my code repo

I posted this on general but thought it was better to post it here, I can not seem to eliminate horizontal scrolling on mobil.

2

I don’t see why, but for some reason the page width is close to the height of my iPhone 7plus. Responsive design mode in developer tools for firefox and safari both show the side scrolling but since it’s merely a calculation the screen width is passed to the box visualization. Try removing the carousel and see if it’s still a problem.

3

It was caused by your social buttons’ container, droners.io photo, and your h2 (the one with map pic)

Edit:
Possible fix for social buttons div:

<section class="page-section cta">
// I added a flex-wrap class below this line
  <div class="d-flex justify-content-evenly flex-wrap">
    <div class="row" style="display: contents;">
      <a href="https://www.facebook.com/airau.tonomo/" target="_blank" class="col-sm-2 offset-sm-1">
        <button class="btn-block btn-xl" style="height: 100%; width: 100%;">
          <i class="fab fa-facebook-square"><img class="fb" alt="Facebook" src="https://raw.githubusercontent.com/tannerpace/airauto/82143cd8d9219e18d5147488fb8b493702b1c949/img/facebook.svg">
            <p></p>
            Facebook
          </i>
        </button>
      </a>
4

I will check and see if that fixes it .

The bootstrap fixed nav bar component has the problem. You can inspect it on the site

https://startbootstrap.github.io/startbootstrap-scrolling-nav/

Removing photo carousel had no effect.

5

The only problem is your <section class="page-section cta">. If you set that to display:none, the scrollbar disappears.
It’s because your <a> and <button> elements are too wide to fit in one row.

6

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