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 %.