Bootstrap file triggers horizontal scrollbar below 780px

Continuing the discussion from Is is possible to move the contact info to the top of the contact form on mobile?:

@xaznbabyx,

Did you change the master bootstrap file at all? A small padding or margin change, or something like that to the original bootstrap file?

This page triggers a horizontal scroll bar at 780px and narrower.

The attached HTML has a boatload of commented out code. As is, it does not trigger a horizontal scroll bar. Read on…

There are two “degrees” of scroll offset.
IF one moves almost any pair of comment marks inward just one level, the lesser scroll bar offset will be triggered. The greater scroll offset is triggered when the comment marks are moved inward 1 level or removed from lines 265 and 269

The commented out version of the HTML only shows 3 errors https://validator.w3.org/nu/#file

Plus, Line 210 has an incomplete classname.

style.css has 13 validation errors: mostly negative padding and homebrew background color values. https://jigsaw.w3.org/css-validator/#validate_by_upload

I do not think that the OP is using the bootstrap code correctly, but I do not have the experience with bootscrap to tell what is wrong.

My HTML has been formatted for readability. It is otherwise unchanged.
FWIW.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Groupeezz</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap -->
    <link href="css/bootstrap.css" rel="stylesheet" type='text/css'>
    <!-- Fonts -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Lato:300,400' rel='stylesheet' type='text/css'>
    <!-- MailChimp Plugin -->
    <link href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css" rel="stylesheet" type="text/css">
    <!-- Plugin Css -->
    <link href="css/owl.carousel.css" rel="stylesheet" type='text/css'>
    <link href="css/owl.theme.default.css" rel="stylesheet" type='text/css'>
    <link href="css/owl.transitions.css" rel="stylesheet">
    <link rel="stylesheet" href="css/animate.css" type="text/css">
    <!-- Custom Css -->
    <link href="css/style.css" rel="stylesheet">
</head>

<body>
    <section id="navigation">
        <nav class="navbar navbar-default navbar-static-top">
            <div class="container">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
<!--
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
-->
<!--
                    <p class="scrollto">
                        <a class="navbar-brand" href="index.html"><img src="img/logo-name.png" alt="logo" class="img-responsive"></a>
                    </p>
-->
                </div>
                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse">
                    <ul class="#collapse nav navbar-nav navbar-right scrollto">
                        <li><a href="#about">About</a></li>
                        <li><a href="#app">How It Works</a></li>
                        <li><a href="#contact">Contact</a></li>
                    </ul>
                </div> <!-- /.navbar-collapse -->
            </div> <!-- /.container -->
        </nav>
    </section> <!-- navigation section end -->

    <section id="home" data-stellar-background-ratio="0.5">
    <div class="parallax-overlay"></div>
        <div class="container">
            <div class="row">
<!--
                <div class="col-sm-6 text-center">
                    <h1 class="home-header1">Connect With Strangers.</h1>
                    <h1 class="home-header2">Love Movies Together.</h1>
                    <div class="home-text">Groupeezz is mobile app created to enhance the social experience for moviegoers. </div>
                </div>
-->
            </div>
            <div class="row">
<!--
                <div class="col-lg-6 text-center"> 
                    <a href="http://itunes.apple.com/us/app/groupeezz/id1051709536?mt=8" target=_blank>
                        <img class="apple" src="img/appstore.png" alt="apple store">
                    </a>
                    <img class="google" src="img/googleplay.png" alt="google play">
                </div>
-->
            </div>
        </div>
    </section>

    <section id="nav">
        <nav class="navbar navbar-default navbar-static-top">
            <div class="container">
                <div class="navbar-header">
<!--
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
-->
<!--
                    <p class="scrollto">
                        <a class="navbar-brand" href="index.html"><img src="img/logo-name.png" alt="logo" class="img-responsive"></a>
                    </p>
-->
                </div>
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav navbar-right scrollto">
                        <li><a class="page-scroll" href="#about">About</a></li>
                        <li><a class="page-scroll" href="#app">How It Works</a></li>
                        <li><a class="page-scroll" href="#contact">Contact</a></li>
                    </ul>
                </div>
            </div> <!-- End of container for Nav Section -->
        </nav>
    </section> <!--navigation section end -->

    <section id="about" class="section-padding">
        <div class="container">
            <div class="row">
<!--
                <div class="col-sm-12 text-center" id="aboutText">
                    <h2 class="h2-about">What is Groupeezz?</h2>
                    <p>Groupeezz introduces a new way to connect strangers interested in the same movies. Experience
                        current movies in theaters with other moviegoers so you won't have to go alone. Join or create
                        your own movie screening groups and love movies together.</p><br>
                    <p>Stay tuned — Groupeezz is currently in testing phase. Sign up for our mailing list and we'll notify you when we've launched in your city!</p>
                    <div class="row">
                        <div class="col-sm-12 text-center" id="badgeText" style="margin-bottom: 25px">
                            <p><span style="font-weight: bold">Android app coming soon.</span> Please enter your email address to be notified when it is ready to download on Google Play. Your information will not be used for any other purpose except to inform you when the app will be available.</p>
                        </div>     
                    </div>
                </div>   
-->
            </div>
            <div class="row">
<!--
                <div class="col-sm-6">
                    <div id="mc_embed_signup">
                        <form action="//thegroupeezz.us12.list-manage.com/subscribe/post?u=1c10ab032dc4d31b06e6127ed&amp;id=f9c2d0b737" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
                            <div id="mc_embed_signup_scroll">
                                <h2>Subscribe to our mailing list</h2>
                                <div class="form-group-ml col-sm-6">
                                    <label for="mce-EMAIL">Email Address <span class="asterisk">*</span></label>
                                    <input type="email" value="" name="EMAIL" placeholder="Email Address" class="form-control required email" id="mce-EMAIL">
                                </div>                
                                <div class="form-group-ml col-sm-6">
                                    <label for="mce-MMERGE3">Zip Code<span class="asterisk">*</span></label>
                                    <input type="text" value="" name="MMERGE3" placeholder="Zip Code" class="form-control" id="mce-MMERGE3">
                                </div>    
                                <div id="mce-responses" class="clear">
                                    <div class="response" id="mce-error-response" style="display:none"></div>
                                    <div class="response" id="mce-success-response" style="display:none"></div>
                                </div>
                                <div style="position: absolute; left: -5000px;" aria-hidden="true">
                                    <input type="text" name="b_1c10ab032dc4d31b06e6127ed_f9c2d0b737" tabindex="-1" value="">
                                </div>
                                <div class="clear">
                                    <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-lg btn-ml btn-cta">
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
-->
            </div>
        </div>
    </section> <!--End mc_embed_signup -->

    <section id="team" class="section-padding">
        <div class="container">
            <div class="row">
<!--
                <div class="col-sm-12 text-center">
                    <h2 class="h2-about">APP FEATURES</h2>
                </div>
-->
            </div>
            <div class="row">
<!--
                <div class="col-sm-6 col-md-3 text-center">
                    <img src="img/avatar1.png" alt="avatar" class="img-responsive center-block">
                    <h3>SEARCH</h3>
                    <p>Looking for a movie buddy or buddies?</p>
                </div>
-->
<!--
                <div class="col-sm-6 col-md-3 text-center">
                    <img src="img/avatar1.png" alt="avatar" class="img-responsive center-block">
                    <h3>BROWSE</h3>
                    <p>showtimes and locations. Watch previews.</p>
                </div>
-->
            </div>
            <div class="row">
<!--
                <div class="col-sm-6 col-md-3 text-center">
                    <img src="img/avatar1.png" alt="avatar" class="img-responsive center-block">
                    <h3>JOIN OR CREATE</h3>
                    <p>your own movie screening groups</p>
                </div>
-->
<!--
                <div class="col-sm-6 col-md-3 text-center">
                    <img src="img/avatar1.png" alt="avatar" class="img-responsive center-block">
                    <h3>CONNECT</h3>
                    <p>with people based on movie interests.</p>
                </div>
-->
            </div>
        </div>
    </section>

    <section id="contact" class="section-padding">
        <div class="container">
            <div class="row">
<!--
                <div class="col-sm- text-center">
                    <h2>Contact Us</h2>                  
                </div>   
-->
            </div>
            <div class="col-sm-7">
                <form action="//thegroupeezz.us12.list-manage.com/subscribe/post?u=1c10ab032dc4d31b06e6127ed&amp;id=f9c2d0b737" method="post" class="validate" target="_blank" novalidate>
                    <div class="messages"></div>
                    <div class="control">
                        <div class="row">
                            <div class="col-sm-6">
                                <label for="name">Name<span class="required">*</span></label>
                                <input type="text" name="name" id="name" placeholder="Enter your full name" value="" class="form-control" required>
                            </div>
                            <div class="col-sm-6">
                                <label for="email">Email<span class="required">*</span></label>
                                <input type="text" name="email"  placeholder="Enter your email address"  value=""  class="form-control" required/>
                            </div>
                            <div class="col-sm-9">
                                <label for="message">Message<span class="required">*</span></label>
                                <textarea rows="5" class="form-control" name="message" class="form-control" placeholder="Enter your message"   required></textarea>
                            </div>
                            <div class="col-sm-6">
                                <button type="submit" name="message" value="Send Message" class="btn btn-lg btn-cta btn-dark">Send Message</button>
                            </div>
                        </div> 
                    </div>
                </form>
            </div>
            <div class="col-sm-5">
                <p>Phone: 1-415-585-4303</p>
                <p>Email: hello@thegroupeezz.com</p>
                <div id="socialmedia">
                    <ul class="list-inline social-channels">
                        <li class="big-icon"><a href="http://www.facebook.com/thegroupeezz/" target=_blank><i class="fa fa-facebook"></i><span class="sr-only">facebook</span></a></li>
                        <li class="big-icon"><a href="http://twitter.com/thegroupeezz" target=_blank><i class="fa fa-twitter"></i><span class="sr-only">twitter</span></a></li>
                        <li class="big-icon"><a href="http://www.instagram.com/thegroupeezz/" target=_blank><i class="fa fa-instagram"></i><span class="sr-only">instagram</span></a></li>
                    </ul>
                </div>   
            </div>
        </div>
    </section>

    <section id="footer" class="section-padding">
        <div class="container">
            <div class="row">
<!--
                <div class="col-sm-12 text-center">
                    <ul class="list-inline">
                        <li><a class="footer-a" href="terms.html">Terms of Use</a></li>
                        <li><a class="footer-a" href="privacy-policy.html">Privacy and Policy</a></li>
                    </ul>
                </div>
-->
                <div class="row">
<!--
                    <div class="col-sm-12 text-center">
                        <p id="copyright">Copyright &copy; 2016. Groupeezz</p>
                    </div>
-->
                </div>               
            </div>
        </div>
    </section> <!-- /#footer -->

    <a href="#" class="scrollToTop"><i class="fa fa-angle-up"></i></a>

    <!-- JQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Bootstrap Core Javascript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" ></script>
    <script src="js/owl.carousel.js"></script>
    <!-- Plugin Javscript -->
    <script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script>
    <script type='text/javascript'>
        (function($) {
            window.fnames = new Array(); 
            window.ftypes = new Array();
            fnames[0]='EMAIL';
            ftypes[0]='email';
            fnames[3]='MMERGE3';
            ftypes[3]='zip';}
            (jQuery));
            var $mcj = jQuery.noConflict(true);
    </script>
    <!--End mc_embed_signup-->
    <script src="js/jquery.sticky.js" type="text/javascript"></script>
    <script src="js/jquery.stellar.js" type="text/javascript"></script>
    <script src="js/jquery.flexslider.js" type="text/javascript"></script>
    <script src="js/jquery.waypoints.js" type="text/javascript"></script>
    <script src="gen_validatorv4.js" type="text/javascript"></script>   
    <script src="js/wow.js" type="text/javascript"></script>
    <script src="js/custom.js" type="text/javascript"></script>
    <script type='text/javascript'>
    var owl = $('#owl-slider').owlCarousel({
    margin:10,
    autoplay: true,
    autoplayHoverPause: true,
    autoplayTimeout: 5500,
    loop:true,
    autoplay: true,
    nav:true,
    items:1,
    onInitialized : function(){
        if($('.owl-item').first().hasClass('active'))
            $('.owl-prev').hide();
        else
            $('.owl-prev').show();
        }
    })
    </script>

</body>
</html>

All files:
xaznbabyx.zip (2.8 MB)

1 Like

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