Alexander  Tolkachev Alexander Tolkachev - 11 months ago 62
CSS Question

How to make div responsive to screen resolution's?

My div works fine (occupies all the area) only if the screen size equals my default screen resolution. Otherwise i get this enter image description here

How to make it responsive to screen resizing?



ul{
list-style: none;
}

header{
width: auto;
background: url(pictures/heading-zebras-2.png) no-repeat 50% 0;
-webkit-background-size: cover;
background-size: cover;
height: 450px;
}

header h1{
float: left;
background-color:rgba(0,0,0,0.5);
padding: 40px 0 34px 43px;
width: 437px;
}

.tel {
display: inline-block;
background-color:rgba(0,0,0,0.5);
height: 60px;
padding: 30px 87px 0 0;
width: cover;
}

.tel li {
list-style-type: none;
display: inline;
}

.tel a{
font: 28pt/0.64 "Consolas", Arial, Helvetica, sans-serif;
color: white;
padding: 0 0 0 50px;
font-size: 87.5%;
}

<header>
<div><h1><a href="homepage.html"><img src="pictures/header-banner-text.png" alt="banner"></a></h1></div>
<div class="tel">
<nav>
<ul>
<li><a href=".html" title="">AMERICAS</a></li>
<li><a href=".html" title="">AFRICA</a></li>
<li><a href=".html" title="">EUROPE</a></li>
<li><a href=".html" title="">AUSTRALIA</a></li>
<li><a href=".html" title="">ASIA</a></li>
</ul>
</nav>
</div>
</header>




Answer Source

It is your fixed h1 width that is creating this problem. If you are after responsive design, try to use fixed values as little as possible.

html,
body {
    min-height: 100%;
    height: 100%;
    width: auto;
    padding: 0;
    margin: 0;
}

ul {
   list-style: none;
}

header {
	width: 100%;
	background: url(pictures/heading-zebras-2.png) no-repeat 50% 0;
	-webkit-background-size: cover;
	background-size: cover;
	height: 450px;
	display: flex;
}

#banner-div {
	flex: 1;
	display: inline-block;
	background-color: rgba(0, 0, 0, 0.5);
}

header h1 {
	width: 100%;
	padding: 40px 0 34px 43px;
	float: left;
}

.tel {
	flex: 4;
	height: 60px;
	width: 100%;
	display: inline-block;
	padding: 30px 87px 0 0;
	background-color: rgba(0, 0, 0, 0.5);
}

.tel li {
	list-style-type: none;
	display: inline;
}

.tel a {
	font: 28pt/0.64 "Consolas", Arial, Helvetica, sans-serif;
	color: white;
	padding: 0 0 0 50px;
	font-size: 87.5%;
}
<header>
	<div id="banner-div">
    	<h1>
			<a href="homepage.html">
				<img src="pictures/header-banner-text.png" alt="banner">
			</a>
		</h1>
	</div>
	<div class="tel">
    	<nav>
        	<ul>
            	<li><a href=".html" title="">AMERICAS</a></li>
            	<li><a href=".html" title="">AFRICA</a></li>
            	<li><a href=".html" title="">EUROPE</a></li>
                <li><a href=".html" title="">AUSTRALIA</a></li>
	            <li><a href=".html" title="">ASIA</a></li>
    	    </ul>
        </nav>
	</div>
</header>