Jump to content

viewport is larger than body


bartonlewis

Recommended Posts

For some reason I cannot determine, there is a scroll bar at the bottom of my page which accesses a blank portion of the viewport on the right.  I have a feeling there is something in the stylesheet of the code I am accessing for the slideshow that is responsible, but I don't know how to correct it.  I have removed all extraneous code except for the slideshow.  Can anybody help?   Thank you.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://use.typekit.net/qkv6kzb.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
    <script src="https://use.typekit.net/qkv6kzb.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
    <meta charset="UTF-8">
<title>Barton's wall cuts</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>

* {box-sizing: border-box;}

body {
    width: auto;
    margin: 0 auto 0;
    }

.flex-container {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin: 0 50px 50px 50px;
    padding-bottom: 30px;
    align-items: center;
    justify-content: center;  
    font-family: "europa",sans-serif;
    font-size: 105%;
    }
.nav {
    margin: 0 30px;
    }
a   {
    text-decoration: none;
    color: black;
    }
div.nav a {
    font-size: 1.8em;
    }
.main {
    width: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 100px;
    }
.browse {
    width: 20%;
    margin: 0 5%;
    }
p.indent1 {
    text-indent: 1em;  
    line-height: 1.3em;
    font-family: "europa",sans-serif;
    font-size: 1.4em;
    color: black;
    display: block;
    margin: 0;
    }

/* CSS FOR SLIDESHOW */
    
.mySlides {display: none;}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
    display: flex;
    justify-content: center;
    width: ;
    }

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  height: 15px;
  width: 15px;
  margin: 15px 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}

/* END OF CSS FOR SLIDESHOW */
    
.indent {
    text-indent: -9999px;
    }
.about {
    width: 66%;
    margin: 0 auto;
    margin-top: 5%;
    }
.about p {
    padding: 15px;
    line-height: 1.3em;
    font-family: "europa",sans-serif;
    font-size: 1.75em;
    color: black;
    }
.underline {
    text-decoration: underline;
    font-variant: small-caps;
    font-size: 1.1em;
    }
a:hover {
    text-decoration: underline;
}
footer {
    background: #827e90;
    height: 75px;
    margin-top: 5%;
    }
footer p {
    padding: 25px;
    font-family: "europa",sans-serif;
    font-size: 1.1em;
    letter-spacing: .8px;
    color: white;
    }
.flex-container-footer {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 100%;
    padding-top: 0px;
    justify-content: space-between;
    align-items: center;
    }
.flex-container-footer>div {
    margin: 0px 50px;
}
.social a {
    color: white;
    }
.fa {
    padding: 10px;
    font-size: ;
    width: ;
    text-align: center;
    text-decoration: none;
    border-radius: 50%;
}
.copyright p {
    font-family: "europa",sans-serif;
    color: black;
    font-size: 1.1em;
    letter-spacing: .8px;
    line-height: 135%;
    font-weight: 500;        
    }

</style>
</head>
<body>

 <div class="parallax">
    <div>
    <h1>text</h1>
    </div>

</div>
    <section class="main">
        <div class="browse">
                <h3>text</h3>
                    <h4>text</h4>
                        <p>text</p>
                        <p>text</p>
                        <p>text</p>
        </div>

        <div class="slideshow-container">

            <div class="mySlides fade">
                <div class="numbertext">1 / 3</div>
                    <img src="http://bartonlewisfilm.com/img_287-163.jpg" style="max-width: 100%" alt="157-245, 96th St., IND Eighth Ave. Line" style="width:80%">
                        <div class="text"></div>
                            </div>

            <div class="mySlides fade">
                <div class="numbertext">2 / 3</div>
                    <img src="http://bartonlewisfilm.com/img_162-373.jpg" style="max-width: 100%" alt="157-245, 96th St., IND Eighth Ave. Line" style="width:80%">
                        <div class="text"></div>
                            </div>

            <div class="mySlides fade">
                <div class="numbertext">3 / 3</div>
                    <img src="http://bartonlewisfilm.com/img_coors_light.jpg" style="max-width: 100%" alt="157-245, 96th St., IND Eighth Ave. Line" style="width:80%">
                        <div class="text"></div>
                            </div>

        </div>
            
        <div class="browse">
                        <p class="indent">Oversize</p>

        </div>
        
    </section>
    
          <div style="text-align:center">
            <span class="dot"></span> 
            <span class="dot"></span> 
            <span class="dot"></span> 

              
                            </div>
            
    <div class="about">
    
        <p>text text text</p>

    </div>
        
 
<script>
var slideIndex = 0;
showSlides();

function showSlides() {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");
    for (i = 0; i < slides.length; i++) {
       slides[i].style.display = "none";  
    }
    slideIndex++;
    if (slideIndex > slides.length) {slideIndex = 1}    
    for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[slideIndex-1].style.display = "block";  
    dots[slideIndex-1].className += " active";
    setTimeout(showSlides, 3000); // Change image every 3 seconds
}
</script>
   
        <footer>
    <div class="flex-container-footer">
        <div>
            <p>copyright © 2018 by Barton Lewis</p>
        </div>
        <div class="social">
            <a href="https://www.facebook.com/profile.php?id=1410465690" class="fa fa-facebook"></a>
            <a href="https://www.instagram.com/bartonlewis2328/" class="fa fa-instagram"></a>
        </div>
    </div>
    </footer>
<script>

</script>
    
</body>
</html>

 

Link to comment
Share on other sites

The problem is you're setting the width to 100% here. It's just as wide as the window, but starts off almost halfway through the screen, so a large part of it is outside of the right boundary of the page.

/* Caption text */
.text {
  ...
  ...
  width: 100%;
  ...
  ...
}

Remove the width property. It is not needed because it's a block element.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...