CODEWITHSUNDEEP
htmlcss
Toknn
Toknn

Reputation: 85

Get rid of spacing between divs?

I am new at HTML and CSS. We just started using the two for an AIT assignment and I'm trying to get as much done as possible during the holiday. The issue I am facing is that I cannot find a way to reduce the amount of spacing between these two divs and it looks aesthetically terrible. I don't recall having padding between these two divs:

enter image description here

Is there anyway I can reduce the spacing between the computers and the slide show?

NOTE: The computers above is under the div 'abovepic' and right below it is the 'slide' div. Here is the code between the two:

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, 4000); // Change image every 2 seconds
}
/*above tickets*/

.abovepic {
  text-align: center;
  transform: translate(0, -35%);
  padding-bottom: 0;
}


/*below tickets*/

* {
  box-sizing: border-box
}


/* Slideshow container */

.slideshow-container {
  max-width: 900px;
  position: relative;
  margin: auto;
  margin-top: 100px;
}


/* Hide the images by default */

.mySlides {
  display: none;
  text-align: center;
}


/* Next & previous buttons */

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}


/* Position the "next button" to the right */

.next {
  right: -500px;
  transform: translate(0, -380%);
  border-radius: 3px 0 0 3px;
}

.prev {
  left: -500px;
  transform: translate(0, -380%);
}


/* On hover, add a black background color with a little bit see-through */

.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}


/* 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;
  opacity: 0;
}


/* The dots/bullets/indicators */

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
  transform: translate(0, -40%);
}

.active,
.dot:hover {
  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
  }
}

.mySlides {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
  text-align: center;
}

.mySlides img {}

.slide {
  background-image: url(./back1.png);
  padding: 50px;
  padding-top: 140px;
}

.row {
  display: -ms-flexbox;
  /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap;
  /* IE10 */
  flex-wrap: wrap;
  margin: 0 -16px;
}

.col-25 {
  -ms-flex: 25%;
  /* IE10 */
  flex: 25%;
}

.col-50 {
  -ms-flex: 50%;
  /* IE10 */
  flex: 50%;
}

.col-75 {
  -ms-flex: 75%;
  /* IE10 */
  flex: 75%;
}

.col-25,
.col-50,
.col-75 {
  padding: 0 16px;
}

.container {}

input[type=text] {
  width: 100%;
  margin-bottom: 20px;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

label {
  margin-bottom: 10px;
  display: block;
}

.icon-container {
  margin-bottom: 20px;
  padding: 7px 0;
  font-size: 24px;
}

.btn {
  background-color: #4CAF50;
  color: white;
  padding: 12px;
  margin: 10px 0;
  border: none;
  width: 100%;
  border-radius: 3px;
  cursor: pointer;
  font-size: 17px;
}

.btn:hover {
  background-color: #45a049;
}

span.price {
  float: right;
  color: grey;
}


/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other (and change the direction - make the "cart" column go on top) */

@media (max-width: 800px) {
  .row {
    flex-direction: column-reverse;
  }
  .col-25 {
    margin-bottom: 20px;
  }
}
<div class="text-justify">
  <div class="abovepic">
    <img src="pc.png" />
  </div>

  <div class="slide">
    <!-- Slideshow container -->
    <div class="slideshow-container">

      <!-- Full-width images with number and caption text -->
      <div class="mySlides fade">
        <div class="numbertext">1 / 3</div>
        <a href="gaming.html" /><img src="easter.png" style="width:200%">
        <div class="text"></div>
      </div>

      <div class="mySlides fade">
        <div class="numbertext">2 / 3</div>
        <a href="gaming.html" /><img src="easter.jpg" style="width:200%">
        <div class="text"></div>
      </div>

      <div class="mySlides fade">
        <div class="numbertext">3 / 3</div>
        <a href="gaming.html" /><img src="whiteout.png" style="width:200%">
        <div class="text"></div>
      </div>

      <!-- Next and previous buttons -->
      <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
      <a class="next" onclick="plusSlides(1)">&#10095;</a>
    </div>
    <br>

    <!-- The dots/circles -->

    <div style="text-align:center">
      <span class="dot" onclick="currentSlide(1)"></span>
      <span class="dot" onclick="currentSlide(2)"></span>
      <span class="dot" onclick="currentSlide(3)"></span>
    </div>

    <!--
              <script>
              var slideIndex = 1;
              showSlides(slideIndex);
    
              function plusSlides(n) {
                showSlides(slideIndex += n);
              }
    
              function currentSlide(n) {
                showSlides(slideIndex = n);
              }
    
              function showSlides(n) {
                var i;
                var slides = document.getElementsByClassName("mySlides");
                var dots = document.getElementsByClassName("dot");
                if (n > slides.length) {slideIndex = 1}
                if (n < 1) {slideIndex = slides.length}
                for (i = 0; i < slides.length; i++) {
                    slides[i].style.display = "none";
                }
                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";
              }
              </script>
      -->


  </div>

Upvotes: 0

Views: 80

Answers (2)

Mihi
Mihi

Reputation: 204

The problem is in this line:

.abovepic {
  transform: translate(0, -35%);
}

When you use translate function, it moves the content of the element, but it still takes the same space. You're moving it 35% up which creates a 35% gap below it.

If you want to move element without it taking space, you could for example use negative top margin, like this:

margin-top: -35%;

Or using relative position:

position: relative;
top: -35%

Anyway you should probably consider whether it's not better to crop the image instead of moving it out of viewport. :)

Upvotes: 2

Agustin L. Lacuara
Agustin L. Lacuara

Reputation: 339

Try using:

height: fit-content for both divs, so they wont be largen than needed.

Also, your .slide selector at .css has padding-top: 140px which can be the problem!

Upvotes: 1

Related Questions