CODEWITHSUNDEEP
htmlcssresponsive
Jin
Jin

Reputation: 1439

Body content in HTML not full screen although set width 100% in CSS? when responsive

In normal (not responsive yet) my website running good, but after I set responsive to (width: 1336px) for my web it's display screen like this although I've set width for this is 100%

enter image description here

/* Here is my CSS *style.css* */

* {
  box-sizing: border-box;
}

body {
  font-family: 'Montserrat', sans-serif;
  margin: 0;
  width: 100%;
}


/* style for header section */

h1 {
  line-height: 65px;
  font-size: 48px;
}

.header-container {
  background-image: linear-gradient( 0deg, rgba(35, 39, 49, -0.18), rgba(35, 39, 49, 1.82)), url("images/bg-image.jpeg");
  background-repeat: no-repeat;
  background-size: cover;
  box-sizing: border-box;
  position: absolute;
  width: 100%;
  height: 743px;
  left: -1px;
  top: 0px;
}

.nav-bar {
  position: absolute;
  width: 1700px;
  height: 135px;
  left: 69px;
  top: 17px;
  filter: brightness(100%);
}

.header-logo {
  float: left;
}

.nav-content {
  list-style-type: none;
}

.menu-section {
  width: 50%;
  float: right;
  margin-top: 34px;
}

.menu-item {
  float: left;
  display: block;
  margin-right: 70px;
}


/* nav menu */

.nav-content li a {
  text-decoration: none;
  color: #fff;
  font-size: 20px;
}

.nav-content li a:hover {
  color: #00B9F7;
}


/* header title */

.header-title {
  color: #fff;
  text-align: center;
  margin: auto;
  width: 30%;
  padding: 10px;
  margin-top: 10%;
}


/* header video */

.header-video {
  margin-left: 30%;
  width: fit-content;
}
<!-- here is my HTML code *index.html* -->

<header class="header-container">
  <div class="header-content">
    <div class="nav-bar">
      <div class="header-logo">
        <a href="#">
          <img id="image-logo-header" class="bottom img-logo" src="images/logo.png">
        </a>
      </div>

      <div class="menu-section">
        <div class="menu-btn-group">
          <div class="menu-toggle"></div>
          <div class="menu-close"></div>
        </div>
        <div class="navigation navbar-collapse ">
          <nav role="navigation">
            <ul class="nav-content">
              <li class="menu-item"><a class="active-item" href="#">Home</a></li>
              <li class="menu-item"><a href="#">Blog</a></li>
              <li class="menu-item"><a href="#">About</a></li>
              <li class="menu-item"><a href="#">Contact</a></li>
              <li class="menu-item"><a href="#">Login</a></li>
              <li class="menu-item"><a href="#">Sign up</a></li>
            </ul>
          </nav>
        </div>
      </div>
    </div>

    <div class="header-title">
      <h1>SHARE YOUR HOLIDDAY DREAM</h1>
    </div>

    <div class="header-video">
      <img class="video-img" src="images/video-img.png">
    </div>
  </div>
</header>

Can anyone help me, please? your answer is my happiness, thank you so much

Upvotes: 1

Views: 8005

Answers (2)

Roberto Vargas
Roberto Vargas

Reputation: 130

Can you try using img: { width: 100vw };?

In css, verify the margins and padding.

Upvotes: 0

Anurag
Anurag

Reputation: 307

This is happening because in your code you have set background width to 100% that is working fine but when you are using resposive design the background image not filling the screen.

Because the background image is filling the 100% width of your responsive container but the blank space that you are seeing in right side is because of nav-bar, you have set its width fixed to 1700px.

To resolve this make your nav-bar responsive so that it can also set its width according to container.

You can use

.nav-bar {
         position: absolute;
         width: 100%;
         height: 135px;
         left: 69px;
         top: 17px;
         filter: brightness(100%);
     }

width: 100% make your nav-bar responsive too.

Upvotes: 2

Related Questions