Jump to content
bartonlewis

viewport is larger than body

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>

 

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Thank you so much!  I would have never caught this.  I'm new to the forum - doesn't look like there is a way to mark a question as "answered" but let me know if otherwise.  :)

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...