CODEWITHSUNDEEP
javascripthtmlcss
Prabhakar Kulkarni
Prabhakar Kulkarni

Reputation: 1

unnecessary height is coming in html css

how to avoid this unnecessary height in responsive view? i tried everything but still not getting

and if possible can anyone suggest me how to make it responsive where both top headers are in left in column which must appear on clicking a hamburger

var main = document.getElementById('main');

function clicked() {
  main.classList.toggle("mystyle");;

}
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

html {
  font-size: 12px;
}

body {
  background-color: black;
  width: 100%;
  height: 100vh;
}

.header1 {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  align-items: center;
  background-color: transparent;
  color: aliceblue;
}

.main {}

.info {
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.header2 {
  width: 100%;
  display: flex;
  color: aliceblue;
  justify-content: space-around;
  align-items: center;
  background-color: transparent;
  height: 60px;
  font-size: 20px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
}

.navbar {}

.navbar ul {
  display: flex;
  flex-direction: row;
  list-style: none;
  position: relative;
}

.navbar ul ul {
  top: 70px;
  width: fit-content;
  padding: 0 30px 0 30px;
  display: none;
  font-size: 1rem;
  line-height: .01px;
  z-index: 10;
  transition: all 2s ease;
  background-color: white;
}

.navbar ul ul li a {
  color: black;
}

.navbar ul li:hover ul {
  display: block;
  opacity: 1;
}

a {
  text-decoration: none;
  color: aliceblue;
}

li {
  padding: 30px;
}

.sicons {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}

.sicons img {
  display: block;
  padding: 5px;
}

.text {
  z-index: 1;
  position: relative;
  top: 0;
  width: 50%;
  display: flex;
  margin-left: 50px;
  flex-direction: column;
  margin-top: 60px;
  height: auto;
  line-height: 8rem;
  background-color: transparent;
  font-weight: 600;
}

.st1 {
  font-size: 1.6rem;
  color: white;
}

.nd2 {
  font-size: 8rem;
  color: crimson;
}

.th3 {
  font-size: 8rem;
  color: white;
}

.btn button {
  left: 0;
  width: 220px;
  height: 70px;
  background-color: transparent;
  border-radius: 50px;
  color: white;
  font-size: 1.2rem;
  border: 1px solid white;
  padding: 15px;
}

.active,
.navbar ul li:hover {
  border-bottom: 1px solid crimson;
}

.mystyle {
  display: none;
}


/* mediaqueries */
<!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">
  <link rel="stylesheet" href="style.css">
  <title>sample</title>
</head>

<body>


  <div id="main">
    <div id="header1" class="header1">

      <img src="https://img.icons8.com/ios-glyphs/30/fa314a/clock--v3.png" />
      <div class="info">
        <span style="color: crimson;">HOURS</span><span>Mon - Sat
                    8.00 - 18.00</span>
      </div><img src="https://img.icons8.com/ios-glyphs/30/fa314a/phone-disconnected.png" />
      <div class="info">

        <span style="color: crimson;">Call</span>+91 878778777</span>
      </div>
      <img src="https://img.icons8.com/ios-glyphs/30/fa314a/marker--v1.png" />
      <div class="info">
        <span style="color: crimson;">Address</span><span>India</span>
      </div>

    </div>

    <hr style="color: crin;">
    <div id="header2" class="header2">
      <div class="navbar">
        <ul class="mt">
          <li class="active"><a href="">Home</a></li>
          <li class=""><a href="">About</a></li>
          <li class=""><a href="">Programs</a>
            <ul>
              <li> <a href="#">School Program</a></li>
              <hr>
              <li> <a href="#">Single Program</a></li>
              <hr>
              <li> <a href="#">Schedule</a></li>
              <hr>
              <li> <a href="#">Workshop and events</a></li>
              <hr>
              <li> <a href="#">Get Quote</a></li>
            </ul>
          </li>

          <li class=""><a href="">Blog</a></li>
          <li class=""><a href="">Shop</a></li>
          <li class=""><a href="">Elements</a></li>
        </ul>
      </div>
      <div class="sicons">
        <img src="https://img.icons8.com/ios-glyphs/30/ffffff/facebook-new.png" />
        <img src="https://img.icons8.com/ios-glyphs/30/ffffff/twitter.png" />
        <img src="https://img.icons8.com/ios-glyphs/30/ffffff/youtube-play.png" />
        <img src="https://img.icons8.com/ios-glyphs/30/ffffff/instagram-new.png" />
      </div>
    </div>

  </div>


  <div class="text">
    <div class="st1">ENROLL TODAY</div>
    <div class="nd2">Learn To</div>
    <div class="th3">Play Guitar </div>
    <div class="btn">
      <button onclick="clicked()"> START NOW </button>
    </div>

  </div>

</body>


</html>

Upvotes: 0

Views: 123

Answers (1)

Peter Pointer
Peter Pointer

Reputation: 4162

Your .text has margin-top: 60px; and line-height: 8rem is this the unneccessary height you were looking for?

You can use Browser development tools to find where stylings come from:
text line-height

As for your question about the hamburger menu button... you can search stackoverflow for examples. Just type "how to make burger button" or something in the search bar at the top.
One result here: Javascript hamburger menu toggle (this is about an error someone had but you can copy&paste the correct source code from there if you also read the solution).

You can also search the internet for tutorials on this. One tutorial found here:
https://dev.to/ljcdev/easy-hamburger-menu-with-js-2do0

Upvotes: 1

Related Questions