Home > OS >  Why is my header section too wide for mobile?
Why is my header section too wide for mobile?

Time:04-19

Im making this website and its responsive on all other sizes but as soon as I get to around 414px in width the intro section is too wide for the screen, anyone know whats causing this? html:

<nav id="menu" >
  <div >
    <img src="img/logo.png"  alt="">
  </div>
  <div >
    <!-- Brand and toggle get grouped for better mobile display -->
    <div >
      <button type="button"  data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span >Toggle navigation</span> <span ></span> <span ></span> <span ></span> </button>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
     <div  id="bs-example-navbar-collapse-1">
      <ul >
        <li><a href="#features" >Specials</a></li>
        <li><a href="#about" >About</a></li>
        <li><a href="#restaurant-menu" >Menu</a></li>
        <li><a href="#contact" >Contact</a></li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
</nav>
<!-- Header -->
<header id="header">
  <div >
    <div >
      <div >
        <div >
          <div >
            <h1>GRAZE CAFE</h1>
            <p>Reservations: 0448708939</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>

css:

.intro {
    display: table;
    width: 100%;
    padding: 0;
    background: url(../img/banner.jpg) center center no-repeat;
    background-color: #e5e5e5;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}
.intro .overlay {
    background: rgba(0,0,0,0.4);
}
.intro h1 {

 font-family: 'Old Standard TT', serif;
    color: #fff;
    font-size: 9em;
    font-weight: 90;
    margin-top: 0;
}
@media (max-width: 500px) {
#header{
    width: 100%
}
}

}
.intro span {
    color: #a7c44c;
    font-weight: 600;
}
.intro p {
    color: #fff;
    font-size: 24px;
    font-weight: 400;
    margin-top: 150px;
}
.hide{
    visibility: hidden;
}
header .intro-text {
    padding-top: 200px;
    padding-bottom: 50px;
    text-align: center;
}

Im not sure what element in the section is causing the section to be too wide. None of the elements have a fixed width except for the logo in the nav bar and even when I set the elements width to be around 300px then there is still empty white space that on the page.

CodePudding user response:

you are facing this issue as you used em for font-size which makes it have a fixed calculated size for any browser as em is calculated relative to the font-size of the element. So if you want this webpage to be responsive use length measurements such as vw,vh or with %.

  • Related