Question 45157 in Html Question posted in
Some basic documentation can be found here.

how can i remove little padding in my flex – Html

i have been following someone on youtube about making simple website with only using html,css and javascript. i’m doing some modification myself, and i’ve been trying to get rid of padding on my flex. there’s little bit padding below that i don’t know how to remove.

here’s the pict
little bit padding below the pict

already review the video i watch and still can’t find the solution, can you guys help me? please explain it in most newbie ways…

below is my HTML

<!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.0" />
 <title>Proj Hotel</title>

 <!-- Fonts -->

 <link rel="preconnect" href="https://fonts.googleapis.com" />
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 <link
   href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,300;0,400;0,700;1,200&display=swap"
   rel="stylesheet"
 />

 <!-- Fonts end -->

 <!-- Feather icons -->
 <script src="https://unpkg.com/feather-icons"></script>
 <!-- Icons end -->

 <link rel="stylesheet" href="css/Style.css" />
</head>

<body>
 <!-- Navbar -->
 <nav class="navbar">
   <a href="#" class="navbar-logo"> Hotel <span>Proj</span></a>

   <div class="navbar-nav">
     <a href="#home">home</a>
     <a href="#about"> About us</a>
     <a href="#rooms"> Rooms </a>
     <a href="#contact">Contact </a>
   </div>

   <div class="navbar-extra">
     <a href="#" id="search"> <i data-feather="search"></i> </a>
     <a href="#" id="shopping-cart">
       <i data-feather="shopping-cart"></i>
     </a>
     <a href="#" id="hamburger-menu"> <i data-feather="menu"></i></a>
   </div>
 </nav>

 <!-- Navbar end -->

 <!--Hero section  -->
 <section class="hero" id="home">
   <main class="content">
     <h1>Get Some Nice <span>Sleep!</span></h1>

     <div class="inpad">
       <p>
         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, fuga.
       </p>

       <a href="#" class="cta">book now!</a>
     </div>
   </main>
 </section>

 <!-- Hero section end -->

 <!-- about sextion -->

 <section id="about" class="about">
   <h2><span>About</span> us</h2>

   <div class="row">
     <div class="about-img">
       <img src="img/aboutfix.jpg" alt="About us" />
     </div>

     <div class="content">
       <h3>Why Choose us?</h3>
       <p>
         Lorem ipsum dolor sit amet consectetur, adipisicing elit. Velit sit,
         in voluptatem adipisci minima eligendi dolor unde quis aliquid
         itaque ut quas pariatur iste neque? Aut labore voluptatibus
         laboriosam sapiente.
       </p>

       <p>
         Lorem, ipsum dolor sit amet consectetur adipisicing elit. Similique
         in esse recusandae quis architecto ad deleniti voluptatum pariatur
         facere aliquam impedit nesciunt fugiat animi dolorum officiis rerum,
         praesentium molestiae eum!
       </p>

       <p>
         Lorem ipsum dolor sit, amet consectetur adipisicing elit.
         Recusandae, vel? Quasi error quas officiis esse mollitia doloremque
         saepe dolorem magnam ad excepturi temporibus, illo possimus quis,
       </p>
     </div>
   </div>
 </section>

 <!-- about section end -->

 <!-- feather icons -->

 <script>
   feather.replace();
 </script>

 <!-- javascript my -->
 <script src="js/script.js"></script>

 <!-- Feather icons -->
</body>
</html>

my CSS

:root {
  --bg: #fffbeb;

  --Primary: #745b36;
}

* {
  font-family: "Poppins", sans-serif;

  margin: 0;

  padding: 0;

  box-sizing: border-box;

  outline: none;

  border: none;

  text-decoration: none;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Poppins", sans-serif;

  background-color: var(--bg);

  color: #fff;

  min-height: 5000px;
}

/* Navbar */

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.2rem 7%;
  background-color: #f2deba;
  border-bottom: 0.5px solid #f8cba6;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

.navbar .navbar-logo {
  font-size: 2rem;
  font-weight: 700;
  color: #bb8d64;
  font-style: italic;
}

.navbar .navbar-logo span {
  color: var(--Primary);
}

.navbar .navbar-nav a {
  display: inline-block;
  font-size: 1.3rem;
  margin: 0 1rem;
  color: var(--Primary);
}

.navbar .navbar-nav a:hover {
  color: #0c0c0c;
}

.navbar .navbar-nav a::after {
  content: "";
  display: block;
  padding-bottom: 0.5rem;
  border-bottom: 0.1rem solid #0a0a0a;
  transform: scaleX(0);
  transition: 0.2s linear;
}

.navbar .navbar-nav a:hover::after {
  transform: scaleX(0.5);
}

.navbar .navbar-extra a {
  color: var(--Primary);
  margin: 0 0.5rem;
}

.navbar .navbar-extra a:hover {
  color: #fff;
}

#hamburger-menu {
  display: none;
}

/* Navbar end */

/* hero section style start */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  background-image: url("../img/1.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
}

/* below is gradient section */
.hero::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 30%;
  bottom: 0;
  background: linear-gradient(
    0deg,
    rgba(255, 251, 235, 1) 8%,
    rgba(255, 255, 255, 0) 50%
  );
}
/* gradient section end */

.hero .content {
  padding: 1.4rem 7%;
  max-width: 70rem;
}

.hero .content h1 {
  font-size: 5rem;
  color: #fff;
  text-shadow: 1px 1px 3px rgba(1, 1, 3, 0.5);
  line-height: 1;
}

.hero .content p {
  font-size: 1.6rem;
  margin-top: 1rem;
  line-height: 1.4;
  color: #fff;
  font-weight: 100;
  text-shadow: 1px 1px 3px rgba(1, 1, 3, 0.5);
}

.hero .content span {
  color: rgba(241, 213, 162, 2);
}

.hero .content .cta {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.5rem 2rem;
  font-size: 1.4rem;
  color: #fff;
  background-color: #f1d5a2a9;
  border-radius: 0.5rem;
  box-shadow: 1px 1px 3px rgba(1, 1, 3, 0.3);
  margin-bottom: 0.5rem;
}

.hero .content .inpad a:hover {
  background-color: #d3ba8d65;
}

.hero .content .inpad {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  color: #fff;
  background-color: rgba(116, 91, 54, 0.7);
  border-radius: 0.5rem;
}
/* Hero section  styles ends */

/* about start */

.about {
  padding: 8rem 20%;
}

.about h2 {
  text-align: center;
  font-size: 2.4rem;
  margin-bottom: 3rem;
  color: rgba(116, 91, 54, 0.7);
}

.about .row .content p {
  color: rgba(116, 91, 54, 0.5);
  margin-bottom: 0.8rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.7rem;
  margin-left: 1rem;
}

.about .row {
  display: flex;
  background-color: rgba(116, 91, 54, 0.2);
}

.about .row .about-img {
  flex: 1 1 25rem;
}

.about .row .about-img img {
  width: 100%;
}

.about .row .content {
  flex: 1 1 20rem;
}

.about .row .content h3 {
  font-size: 1.5rem;
  color: rgba(116, 91, 54, 0.5);
  padding-left: 1rem;
}

/* about end */

/* media queries */

/* laptop */
@media (max-width: 1366px) {
  html {
    font-size: 75%;
  }
}

/* end */

/* Tablet */
@media (max-width: 768px) {
  html {
    font-size: 62.5%;
  }

  #hamburger-menu {
    display: inline-block;
  }

  .navbar .navbar-nav {
    position: absolute;
    top: 100%;
    right: -100%;
    background-color: #fff;
    width: 25rem;
    height: 100vh;
    transition: 0.5s;
  }

  .navbar .navbar-nav.active {
    right: 0;
  }

  .navbar .navbar-nav a {
    color: var(--Primary);
    display: block;
    margin: 1.5rem;
    padding: 0.5rem;
    font-size: 2rem;
  }

  .navbar .navbar-nav a::after {
    transform-origin: 0 0;
  }

  .navbar .navbar-nav a:hover::after {
    transform: scaleX(0.3);
  }

  .about .row {
    flex-wrap: wrap;
  }

  .about .row .about-img img {
    height: 25rem;
    object-fit: cover;
    object-position: center;
  }

  .about .row .content {
    padding: 0;
  }

  .about .row .content h3 {
    margin-top: 1rem;
    font-size: 2rem;
  }

  .about .row .content p {
    font-size: 1.6rem;
  }
}

/* end */

/* mobile */
@media (max-width: 450px) {
  html {
    font-size: 55%;
  }
}

/* end */

/* Media queries end */

and my Javascript

// toggle class active
const navbarNav = document.querySelector(".navbar-nav");
//ketika hamburger menu di klik
document.querySelector("#hamburger-menu").onclick = () => {
  navbarNav.classList.toggle("active");
};

// outside click to close sidebar

const hamburger = document.querySelector("#hamburger-menu");

document.addEventListener("click", function (e) {
  if (!hamburger.contains(e.target) && !navbarNav.contains(e.target)) {
    navbarNav.classList.remove("active");
  }
});

i’m sorry about the messy codes i made, thanks in advance.

Tags:

2

Answers


  1. 0

    Remove min-height: 5000px from inside the body tag in css

    Login or Signup to reply.
  2. 0

    Are you referring to this space?

    enter image description here

    This is not padding, but rather this is caused by the height of the image on the left. This is because the image is set to take up the same width as the text on the right (due to flex: 1), and so the height of the image causes the height of the content on the right to also increase, which is why you see this blank space at the bottom.

    A simple option could be to apply align-items: center to the flex-container which will give equal space on the top or bottom. But this will not remove the spacing altogether.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search