CODEWITHSUNDEEP
htmlcss
Tommy
Tommy

Reputation: 25

Unintended overflow on website

I am doing a project for school and its all going good except im trying to align some text to the right side of the page and whenever I do so ( probably not the correct method ) it causes there to be extra white space on the webpage and a horizontal scrollbar to appear. Ive been working on fixing it but im still new to HTML and CSS and just can't grasp it any help is much appreciated!

 <!DOCTYPE html>
<html>
    <head>
            <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
     <link rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/[email protected]/animate.min.css">
  <!-- or -->
  <link rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

  <link rel="stylesheet" href="css/animate.css">
        <style>

html, body {
    max-width: 100%;
    overflow-x: hidden;
  font: normal 75% Arial, Helvetica, sans-serif;
  background-color: white;

}


canvas {
  display: block;
  vertical-align: bottom;
}


/* ---- particles.js container ---- */

#particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom left, navy, teal);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  z-index: -2;
 border-bottom-style: solid;
 border-width:1px;
}

.count-particles {
  position: absolute;
  top: 48px;
  left: 0;
  width: 80px;
  color: #13E8E9;
  font-size: .8em;
  text-align: left;
  text-indent: 4px;
  line-height: 14px;
  padding-bottom: 2px;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
}

.js-count-particles {
  font-size: 1.1em;
}


.button-container {
  position: absolute;
  width: 100%;
  top: 40%;
  transform: translateY(-50%);
  text-align: center;
}

.button-container h1 {
  display: inline-block;
}

.center {
  display: flex;
  justify-content: center; 
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

}


.bibliography{
  justify-content: center; 
  position: absolute;
  top: 108%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color:navy;

}

.bibliographytext{
  justify-content: left; 
  position: absolute;
  top: 129%;
  left: 35%;
  transform: translate(-50%, -50%);
  text-align: left;
  color:navy;
  padding-bottom:15px;

}


.wrapper {
  column-count: 2;
  column-gap: 50px;
  padding: 50px;
}

p {
  line-height: 1.6; 
  font-family: Helvetica;
  margin: 0;
  font-size: 14px;
}

.star {
  float: left;
  width: 125px;
  shape-outside: url(gatsby.jpeg);
  shape-margin:20px;
  margin-right: 20px;
  margin-bottom: 20px;
}

.wow { visibility: hidden; }

.right {
    float: center;
        position: absolute;
    top: 145%;
    text-align:left;
   overflow-x: hidden;
     transform: translateX(60%);
}


/* add glow to button *\

    </style>
</head>
<body>
    <div class="container">
    <h1 style="font-family: Brush Script MT; font-size:75px; color:#DCDCDC;cursor: default;" class="center">The Great Gatsby</h1>
</div>




  <div class="particlesdiv2" id="particles-js"></div>
  <div>
    <script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
  </div>

<script> particlesJS("particles-js", {"particles":{"number":{"value":80,"density":{"enable":true,"value_area":800}},"color":{"value":"#ffffff"},"shape":{"type":"circle","stroke":{"width":0,"color":"#000000"},"polygon":{"nb_sides":5},"image":{"src":"img/github.svg","width":100,"height":100}},"opacity":{"value":0.5,"random":false,"anim":{"enable":false,"speed":1,"opacity_min":0.1,"sync":false}},"size":{"value":3,"random":true,"anim":{"enable":false,"speed":40,"size_min":0.1,"sync":false}},"line_linked":{"enable":true,"distance":150,"color":"#ffffff","opacity":0.4,"width":1},"move":{"enable":true,"speed":6,"direction":"none","random":false,"straight":false,"out_mode":"out","bounce":false,"attract":{"enable":false,"rotateX":600,"rotateY":1200}}},"interactivity":{"detect_on":"canvas","events":{"onhover":{"enable":true,"mode":"repulse"},"onclick":{"enable":true,"mode":"push"},"resize":true},"modes":{"grab":{"distance":400,"line_linked":{"opacity":1}},"bubble":{"distance":40,"size":40,"duration":2,"opacity":8,"speed":3},"repulse":{"distance":200,"duration":0.4},"push":{"particles_nb":4},"remove":{"particles_nb":2}}},"retina_detect":true});var count_particles, stats, update; stats = new Stats; stats.setMode(0); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; document.body.appendChild(stats.domElement); count_particles = document.querySelector('.js-count-particles'); update = function() { stats.begin(); stats.end(); if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) { count_particles.innerText = window.pJSDom[0].pJS.particles.array.length; } requestAnimationFrame(update); }; requestAnimationFrame(update);;
</script>

 <script src="js/wow.min.js"></script>
              <script>
              new WOW().init();
              </script>



<div id="bibliography" class="bibliography container">
<h2>A Little About Gatsby</h2>
<h3><i>Bibliography</i>
</div>

<div class="wrapper bibliographytext container">

  <img src="gatsby.jpeg" alt="" class="star wow slideInRight" data-wow-duration="2s">


  <p class="wow slideInRight" data-wow-duration="2s" data-wow-delay="1s">Lorem ipsum dolor sit amet, his qualisque maluisset evertitur ei, rebum erant antiopam vel id. Etiam sonet ex nam, vis dicam invenire ne. An mei vitae aliquid assentior, at mei vide praesent. In lobortis tractatos argumentum qui, eu vivendo evertitur nam. Eu legendos gubergren mea, ea suas utinam libris mel.</p>



<hr>
</div>

<div class=" right wrapper container">

  <img src="gatsby.jpeg" alt="" class="star wow slideInRight" data-wow-duration="2s">
<p>

Lorem ipsum dolor sit amet, his qualisque maluisset evertitur ei, rebum erant antiopam vel id. Etiam sonet ex nam, vis dicam invenire ne. An mei vitae aliquid assentior, at mei vide praesent. In lobortis tractatos argumentum qui, eu vivendo evertitur nam. Eu legendos gubergren mea, ea suas utinam libris mel.

  </p>

  <hr>

</div>




        </body>
</html>

Upvotes: 0

Views: 80

Answers (3)

Dhaval Patel
Dhaval Patel

Reputation: 90

I have make minor change css and HTML format please check. I have try fix your issue.

Thanks.

html, body {
    max-width: 100%;
    overflow-x: hidden;
  font: normal 75% Arial, Helvetica, sans-serif;
  background-color: white;

}


canvas {
  display: block;
  vertical-align: bottom;
}


/* ---- particles.js container ---- */

#particles-js {

  width: 100%;
  min-height: 100vh;
  background: linear-gradient(to bottom left, navy, teal);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  z-index: -2;
 border-bottom-style: solid;
 border-width:1px;
}

.count-particles {
  position: absolute;
  top: 48px;
  left: 0;
  width: 80px;
  color: #13E8E9;
  font-size: .8em;
  text-align: left;
  text-indent: 4px;
  line-height: 14px;
  padding-bottom: 2px;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
}

.js-count-particles {
  font-size: 1.1em;
}


.button-container {
  position: absolute;
  width: 100%;
  top: 40%;
  transform: translateY(-50%);
  text-align: center;
}

.button-container h1 {
  display: inline-block;
}

.center {
  display: flex;
  justify-content: center; 
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

}


.bibliography{
  justify-content: center; 
  text-align: center;
  color:navy;
  padding-top: 40px;
  padding-bottom: 40px;

}

.bibliographytext{
  justify-content: left; 
  
  text-align: left;
  color:navy;
  padding-bottom:15px;

}


.wrapper p {
  column-count: 2;
  column-gap: 50px;
  padding: 50px;
}

p {
  line-height: 1.6; 
  font-family: Helvetica;
  margin: 0;
  font-size: 14px;
}

.star {
  float: left;
  width: 125px;
  shape-outside: url(gatsby.jpeg);
  shape-margin:20px;
  margin-right: 20px;
  margin-bottom: 20px;
}



.right {
	text-align:left;
	overflow-x: hidden;
}
hr {
	display: block;
	width: 100%;
	
}
hr:after {
	content: "";
  display: table;
  clear: both;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

<div class="container">
    <h1 style="font-family: Brush Script MT; font-size:75px; color:#DCDCDC;cursor: default;" class="center">The Great Gatsby</h1>
</div>




  <div class="particlesdiv2" id="particles-js"></div>
   

<script> particlesJS("particles-js", {"particles":{"number":{"value":80,"density":{"enable":true,"value_area":800}},"color":{"value":"#ffffff"},"shape":{"type":"circle","stroke":{"width":0,"color":"#000000"},"polygon":{"nb_sides":5},"image":{"src":"img/github.svg","width":100,"height":100}},"opacity":{"value":0.5,"random":false,"anim":{"enable":false,"speed":1,"opacity_min":0.1,"sync":false}},"size":{"value":3,"random":true,"anim":{"enable":false,"speed":40,"size_min":0.1,"sync":false}},"line_linked":{"enable":true,"distance":150,"color":"#ffffff","opacity":0.4,"width":1},"move":{"enable":true,"speed":6,"direction":"none","random":false,"straight":false,"out_mode":"out","bounce":false,"attract":{"enable":false,"rotateX":600,"rotateY":1200}}},"interactivity":{"detect_on":"canvas","events":{"onhover":{"enable":true,"mode":"repulse"},"onclick":{"enable":true,"mode":"push"},"resize":true},"modes":{"grab":{"distance":400,"line_linked":{"opacity":1}},"bubble":{"distance":40,"size":40,"duration":2,"opacity":8,"speed":3},"repulse":{"distance":200,"duration":0.4},"push":{"particles_nb":4},"remove":{"particles_nb":2}}},"retina_detect":true});var count_particles, stats, update; stats = new Stats; stats.setMode(0); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; document.body.appendChild(stats.domElement); count_particles = document.querySelector('.js-count-particles'); update = function() { stats.begin(); stats.end(); if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) { count_particles.innerText = window.pJSDom[0].pJS.particles.array.length; } requestAnimationFrame(update); }; requestAnimationFrame(update);;
</script>

 


<div id="bibliography" class="bibliography container">
<h2>A Little About Gatsby</h2>
<h3><i>Bibliography</i>
</div>

<div class="wrapper bibliographytext container">

  


  <p class="wow slideInRight" data-wow-duration="2s" data-wow-delay="1s">
  <img src="gatsby.jpeg" alt="" class="star wow slideInRight" data-wow-duration="2s">
  Lorem ipsum dolor sit amet, his qualisque maluisset evertitur ei, rebum erant antiopam vel id. Etiam sonet ex nam, vis dicam invenire ne. An mei vitae aliquid assentior, at mei vide praesent. In lobortis tractatos argumentum qui, eu vivendo evertitur nam. Eu legendos gubergren mea, ea suas utinam libris mel.</p>



<hr>
</div>

<div class="right wrapper container">
  
	<p><img src="gatsby.jpeg" alt="" class="star wow slideInRight" data-wow-duration="2s"> Lorem ipsum dolor sit amet, his qualisque maluisset evertitur ei, rebum erant antiopam vel id. Etiam sonet ex nam, vis dicam invenire ne. An mei vitae aliquid assentior, at mei vide praesent. In lobortis tractatos argumentum qui, eu vivendo evertitur nam. Eu legendos gubergren mea, ea suas utinam libris mel.</p>

  <hr>

</div>

Upvotes: 0

trevorp
trevorp

Reputation: 1168

You need to remove the transform: translateX(60%); and add right: 0;

Here's the updated CSS to fix your issue:

.right {
    right: 0;
    position: absolute;
    top: 145%;
    text-align:left;
    overflow-x: hidden;
}

Working demo

Upvotes: 0

Nandita Sharma
Nandita Sharma

Reputation: 13407

Add right:0; on "right wrapper container" div and remove transform: translateX(60%); css property.

And also remove float center style. there no such thing as float center.

Upvotes: 1

Related Questions