Twitter Bootstrap Question posted in

Whitespace randomly appeared in site-Twitter bootstrap

I am building a website to showcase my future projects. But a whitespace randomly appeared on the site. When I inspect the site in chrome, the space does not seem to belong to any element. The space is between the banner and container-fluid from bootstrap. But when I add an extra div between the banner and container-fluid, the space seems to be on top of the container-fluid rather than below the banner.

Another problem I wanted to solve was, how can I make the text "Coming Soon" disappear when I hover over the images. I tried using "+" and "~" but it doesn’t seem to work.

Any help or ideas would be very much appreciated! 🙂
Here is the code.

const navSlide = () => {
  const burgerMenu = document.querySelector(".burger");
  const nav = document.querySelector(".navbar-nav");
  const navlinks = document.querySelectorAll(".navbar-nav li");

  burgerMenu.addEventListener("click", function () {
    // Toggle drop down menu
    nav.classList.toggle("mobilenav-active");

    // Increase links' opacity
    navlinks.forEach((link, index) => {
      if (link.style.animation) {
        link.style.animation = "";
      } else {
        link.style.animation = `linkSlide 0.5s ease forwards ${
          index / 7 + 0.5
        }s`;
      }
    });

    // Toggle burger to cross animation
    burgerMenu.classList.toggle("toggle");
  });
};

navSlide();
@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montaga&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins&family=Roboto+Slab&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.site {
  overflow-x: hidden;
  /* Unnecessary IMHO, uncomment next line to force hidden behavior */
  /* overflow-x: hidden !important; */
  /* Additional tunning proposed by the community */
  position: relative;
  width: 100%;
}

button {
  outline: none !important;
}

/*NAVIGATION BAR*/
header {
  position: absolute;
  z-index: 10;
  width: 100%;
  padding: 25px 5%;
}

.navbar-nav {
  flex-direction: row;
}

.navbar-brand {
  font-family: "Oswald", sans-serif;
  font-size: 2em;
  text-transform: uppercase;
  letter-spacing: 0.2px;
  color: rgba(202, 210, 197, 1);
  text-shadow: 1px 1px 3px black;
  margin-right: 0;
}

.navbar-brand:hover {
  color: rgba(202, 210, 197, 1);
}

.nav-item,
.nav-link {
  font-size: 1.05em;
  text-transform: uppercase;
  font-weight: 800;
  margin-right: 20px;
  color: #cad2c5;
  text-shadow: 1px 1px 5px black;
  font-family: "Montaga", serif;
  letter-spacing: 1px;
  transition: all 0.5s;
}

.nav-link:hover {
  background: #2f3e46;
  color: #cad2c5;
}

#navbutton {
  font-size: 1.05em;
  text-transform: capitalize;
  font-weight: 500;
  font-family: "Montaga", serif;
  letter-spacing: 1px;
  padding: 9px 25px;
  background: #cad2c5;
  border: none;
  border-radius: 50px;
  transition: all 0.5s;
  margin-left: 10px;
}

#navbutton:hover {
  background: #2f3e46;
  color: #cad2c5;
}

.burger div {
  width: 25px;
  height: 3px;
  background: #cad2c5;
  margin: 5px;
  border-radius: 3px;
  transition: all 0.3s ease;
}

.burger {
  display: none;
}

/* Make from burger icon to X icon */
.toggle #line1 {
  transform: rotate(-45deg) translate(-5px, 6px);
}

.toggle #line2 {
  opacity: 0;
}

.toggle #line3 {
  transform: rotate(45deg) translate(-5px, -6px);
}

/* Animation for links */
@keyframes linkSlide {
  from {
    opacity: 0;
    transform: translateX(100px);
  }

  to {
    opacity: 1;
    transform: translateX(0px);
  }
}

/*BANNER*/
.banner {
  position: relative;
  background: linear-gradient(rgba(24, 25, 26, 0.4), rgba(24, 25, 26, 0.4)),
    url("../images/projects/banner-img.jpg") center/cover no-repeat fixed;
  background-position: 50% 60%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

#banner-text {
  font-size: 6rem;
  color: rgb(202, 210, 197);
  letter-spacing: 2px;
  text-shadow: 1px 1px 10px black;
  font-family: "Dancing Script", cursive;
}

/* Mobile */
@media screen and (max-width: 992px) {
  body {
    overflow-x: hidden;
  }

  .navbar-nav {
    position: absolute;
    height: calc(95vh - 80px);
    right: 0;
    width: 100%;
    top: 80px;
    background: #354f52;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: space-between;
    padding: 100px 0px;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.5s ease-in;
  }

  .nav-item,
  .nav-link {
    margin-right: 0;
    text-shadow: none;
  }

  .navbar-nav li a:hover {
    color: #354f52;
    background: #edf0f1;
    padding: 10px 20px;
    text-shadow: none;
  }

  .nav-item {
    opacity: 0;
  }

  .burger {
    display: block;
    cursor: pointer;
  }

  .navbar-nav.mobilenav-active {
    transform: translateX(0%);
    opacity: 0.96;
  }

  #navbutton {
    margin-left: 0;
  }

  #banner-text {
    font-size: 5rem;
  }
}

.transition {
  width: 100vw;
  height: 50px;
  background: #000;
}

/*IMAGE GALLERY*/
.container-fluid {
  background: rgb(47,62,70);
  background: radial-gradient(circle, rgba(47,62,70,1) 0%, rgba(132,169,140,1) 100%);
}

.item {
    transition: all 0.5s ease-in-out;
    position: relative;
    text-align: center;
    color: white;
}

.item img {
    filter: brightness(50%);
    transition: all 0.3s ease-in-out;
}

.item img:hover {
    filter: brightness(100%);
}

.img-center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Oswald", sans-serif;
  font-weight: 500;
  font-size: 2.5rem;
  color: #f5f5f5;
  text-shadow: 1px 1px 2px black;
  transition: all 0.3s ease-in-out;
}

/*FOOTER*/
footer {
  display: flex;
  flex-flow: row wrap;
  padding: 60px 50px 20px 50px;
  background: #2f3e46;
  line-height: 1.5;
  font-family: "Poppins", sans-serif;
}

.footer {
  margin: auto;
  position: relative;
}

.footer-container {
  position: absolute;
  margin: 0;
  padding: 0;
  top: 50%;
  transform: translateY(-50%);
}

#logo {
  margin: 0;
  font-family: "Oswald", sans-serif;
  font-size: 2em;
  text-transform: uppercase;
  letter-spacing: 0.2px;
  color: rgba(202, 210, 197, 1);
}

.footer > * {
  flex: 1 100%;
}

.footer-col-left {
  margin-right: 1.25em;
  margin-bottom: 2em;
}

.footer-col-right h4 {
  font-size: 20px;
  color: #cad2c5;
  margin-bottom: 35px;
  text-transform: capitalize;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  position: relative;
}

.footer-col-right h4::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -10px;
  background: #e91e63;
  height: 2px;
  box-sizing: border-box;
  width: 50px;
}

.footer ul {
  list-style: none;
  padding-left: 0;
}

.footer-col-right ul li:not(:last-child) {
  margin-bottom: 10px;
}

.box li a,
.box li p {
  font-size: 16px;
  color: #f5f5f5;
  text-decoration: none;
  font-weight: 300;
  display: block;
  font-family: "Roboto Slab", serif;
  transition: all 0.3s ease;
}

.footer-col-right ul li a:hover {
  color: #cad2c5;
  padding-left: 10px;
}

.footer a {
  text-decoration: none;
}

.footer-col-right {
  display: flex;
  flex-flow: row wrap;
}

.footer-col-right > * {
  flex: 1 50%;
  margin-right: 1.25em;
}

.footer-row-bot {
  text-align: center;
  color: #cad2c5;
  padding-top: 45px;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 14px;
}

.footer-col-left p {
  padding-right: 20%;
}

.footer-col-left .socials a {
  display: inline-block;
  height: 40px;
  width: 40px;
  background: #52796f;
  margin: 0 10px 10px 0;
  text-align: center;
  line-height: 40px;
  border-radius: 50%;
  color: rgba(202, 210, 197, 1);
  transition: all 0.5s ease;
}

.socials {
  padding-top: 5px;
}

.footer-col-left .socials a:hover {
  background: rgba(202, 210, 197, 1);
  color: #52796f;
}

@media screen and (max-width: 780px) {
  footer {
    padding: 60px 10px 20px 10px;
  }
}
@media screen and (min-width: 700px) {
  .footer-col-right > * {
    flex: 1;
  }

  .footer-col-left {
    flex: 1 0px;
  }

  .footer-col-right {
    flex: 2 0px;
  }
}

@media screen and (max-width: 700px) {
  .footer {
    padding: 15px;
  }

  .footer-container {
    position: absolute;
    margin-top: 30px;
    padding: 0;
    top: 0;
    transform: translateY(0);
  }

  .footer-col-right {
    margin-top: 75px;
  }

  .footer-col-right h4 {
    margin-top: 50px;
  }
}
<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
      crossorigin="anonymous"
    />
    <script
      src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
      integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
      crossorigin="anonymous"
    ></script>

    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
      rel="stylesheet"
      type="text/css"
    />
    <link href="./css/project-style.css" rel="stylesheet" />
    <link rel="shortcut icon" href="./images/fav.ico" type="image/x-icon" />

    <title>Projects -BWS</title>
  </head>

  <body>
    <div class="site">
      <header>
        <nav class="navbar navbar-expand-lg">
          <a class="navbar-brand navbar-left" href="index.html">BrianWyann</a>
          <ul class="navbar-nav navbar-light ml-lg-auto">
            <li class="nav-item active">
              <a class="nav-link" href="./index.html"
                >Home<span class="sr-only">(current)</span></a
              >
            </li>
            <li class="nav-item">
              <a class="nav-link" href="./about.html">About Me</a>
            </li>

            <li class="nav-item">
              <a class="nav-link" href="./project.html">Projects</a>
            </li>
          </ul>

          <div class="burger navbar-center">
            <div id="line1"></div>
            <div id="line2"></div>
            <div id="line3"></div>
          </div>

          <a href="./contact.html" id="contact">
            <button id="navbutton">Contacts</button>
          </a>
        </nav>
      </header>

      <section class="banner">
        <h1 id="banner-text">My Creations</h1>
      </section>

      <div class="transition"></div>
        <div class="container-fluid">
            <div class="row mt-4">

                <div class="item col-sm-6 col-md-4 mb-3">
                    <a href="./images/projects/img1.jpg" class="fancybox" data-fancy="gallery1">
                        <img src="./images/projects/img1.jpg" width="100%" height="100%">
                        <h5 class="img-center">Coming Soon!</h5>
                    </a>
                </div>

                <div class="item col-sm-6 col-md-4 mb-3">
                    <a href="./images/projects/img2.jpg" class="fancybox" data-fancy="gallery1">
                        <img src="./images/projects/img2.jpg" width="100%" height="100%">
                        <h5 class="img-center">Coming Soon!</h5>
                    </a>
                </div>

                <div class="item col-sm-6 col-md-4 mb-3">
                    <a href="./images/projects/img3.jpg" class="fancybox" data-fancy="gallery1">
                        <img src="./images/projects/img3.jpg" width="100%" height="100%">
                        <h5 class="img-center">Coming Soon!</h5>
                    </a>
                </div>

                <div class="item col-sm-6 col-md-4 mb-3">
                    <a href="./images/projects/img4.jpg" class="fancybox" data-fancy="gallery1">
                        <img src="./images/projects/img4.jpg" width="100%" height="100%">
                        <h5 class="img-center">Coming Soon!</h5>
                    </a>
                </div>

                <div class="item col-sm-6 col-md-4 mb-3">
                    <a href="./images/projects/img5.jpg" class="fancybox" data-fancy="gallery1">
                        <img src="./images/projects/img5.jpg" width="100%" height="100%">
                        <h5 class="img-center">Coming Soon!</h5>
                    </a>
                </div>

                <div class="item col-sm-6 col-md-4 mb-3">
                    <a href="./images/projects/img6.jpg" class="fancybox" data-fancy="gallery1">
                        <img src="./images/projects/img6.jpg" width="100%" height="100%">
                        <h5 class="img-center">Coming Soon!</h5>
                    </a>
                </div>

                <div class="item col-sm-6 col-md-4 mb-3">
                    <a href="./images/projects/img7.jpg" class="fancybox" data-fancy="gallery1">
                        <img src="./images/projects/img7.jpg" width="100%" height="100%">
                        <h5 class="img-center">Coming Soon!</h5>
                    </a>
                </div>

                <div class="item col-sm-6 col-md-4 mb-3">
                    <a href="./images/projects/img8.jpg" class="fancybox" data-fancy="gallery1">
                        <img src="./images/projects/img8.jpg" width="100%" height="100%">
                        <h5 class="img-center">Coming Soon!</h5>
                    </a>
                </div>

                <div class="item col-sm-6 col-md-4 mb-3">
                    <a href="./images/projects/img9.jpg" class="fancybox" data-fancy="gallery1">
                        <img src="./images/projects/img9.jpg" width="100%" height="100%">
                        <h5 class="img-center">Coming Soon!</h5>
                    </a>
                </div>
            </div>
        </div>

      <footer class="footer">
        <div class="footer-col-left">
          <div class="footer-container">
            <a id="logobutton" href="index.html">
              <h4 id="logo">BrianWyann</h4>
            </a>

            <div class="socials">
              <a href="https://www.facebook.com/" target="blank"
                ><i class="fab fa-facebook-f"></i
              ></a>
              <a href="https://twitter.com/" target="blank"
                ><i class="fab fa-twitter"></i
              ></a>
              <a href="https://www.instagram.com/" target="blank"
                ><i class="fab fa-instagram"></i
              ></a>
              <a href="https://www.linkedin.com/feed/" target="blank"
                ><i class="fab fa-linkedin-in"></i
              ></a>
            </div>
          </div>
        </div>

        <ul class="footer-col-right">
          <li>
            <h4>Myself</h4>

            <ul class="box">
              <li><a href="./index.html">Home</a></li>
              <li><a href="./about.html">About</a></li>
              <li><a href="./project.html">Projects</a></li>
              <li><a href="./contact.html">Contacts</a></li>
            </ul>
          </li>

          <li class="mooc">
            <h4>MOOCs</h4>

            <ul class="box">
              <li><a href="https://www.edx.org/" target="blank">edX</a></li>
              <li>
                <a href="https://www.coursera.org/" target="blank">Coursera</a>
              </li>
              <li>
                <a href="https://www.futurelearn.com/" target="blank"
                  >FutureLearn</a
                >
              </li>
              <li>
                <a href="https://cognitiveclass.ai/" target="blank"
                  >CognitiveClass</a
                >
              </li>
            </ul>
          </li>

          <li>
            <h4>Address</h4>
            <ul class="box">
              <li>
                <p>
                  C 29, Perumahan Sunter Mediterania, 14340, North Jakarta City,
                  Jakarta, Indonesia
                </p>
              </li>
            </ul>
          </li>
        </ul>
        <div class="footer-row-bot">
          <p>All right reserved by &copy;wyannbrian 2020</p>
        </div>
      </footer>

      <script src="./js/app.js"></script>
    </div>
  </body>
</html>
Tags:

2

Answers


  1. 0

    Solution for whitespace: Remove margin-top styling applied to the div class="row mt-4" inside div class="container-fluid".

    .mt-4 {
    margin-top: 1.5rem!important; /*remove this*/
}
    Login or Signup to reply.
  2. 0

    There is a setting with !important for margin-top buried in an SCSS file.

    .mt-4, .my-4 {
    margin-top: 1.5rem!important;
}

    To override it for just this one instance (so as not to disturb its usage anywhere else if used) introduce this inline style:

      <div class="transition"></div>
    <div class="container-fluid">
        <div class="row mt-4" style="margin-top: 0 !important;">
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search