First of all Im very new to web development and bootstrap.
Im trying the page to be responsive, but when the browser is resized, divs are overlapping.
As you can see, "main-content" is the top div and the bottom white div is the "content"
the top 3 pics (top-hive) and bottom 2 pics (bottom-hive) are also in a separate div. When zoomed out these pics goes beyond its placement div.
Could some one please explain a way around this.
HTML
<!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">
<title>S.H.I.E.L.D</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom -->
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div class="nav container">
</div>
<div class="main-content container">
<div class="top-hive row">
<img src="images/hive1.png">
<img src="images/hive2.png">
<img src="images/hive3.png">
</div>
<div class="bottom-hive row">
<img src="images/hive4.png">
<img src="images/hive5.png">
</div>
</div>
<div class="content container">
</div>
<div class="footer container">
<h5>Copyright (2015)</h5>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
CSS
body {
background: url(../images/BG_01.png) repeat fixed top center;
background-size: 100% auto;
}
/*NAV*/
.nav {
background: url(../images/header_01.png);
background-position: center;
height: 417px;
width: 100%;
position: relative;
z-index:2;
}
/*MAIN CONTENT*/
.main-content {
background: url(../images/CBG_03.png) no-repeat;
height: 684px;
background-position: center;
max-width: 100%;
text-align: center;
margin-top: -215px;
position: relative;
z-index:1;
}
.top-hive {
margin-top: 106px;
}
.top-hive img {
padding: 5px;
}
.bottom-hive {
margin-top: -60px;
}
.bottom-hive img {
padding: 5px;
}
/*CONTENT*/
.content {
background: url(../images/CBG2_03.png) no-repeat;
height: 621px;
background-position: center;
width: 100%;
text-align: center;
margin-top: -12px;
}
.text h3 {
text-transform: uppercase;
font-size: 2.1em;
}
.text p {
font-size: 1em;
}
.footer {
background: #050719 url(../images/footer_02.png)repeat;
height: 178px;
width: 100%;
text-align: center;
background-position: center;
}
/*FOOTER*/
.footer h5 {
color: #58a7d9;
margin-top: 127px;
}
One of the hexagons are being pushed down with the smaller browser width, causing the whole thing to be three hexagons high instead of two.
Since you set an explicit height on the .main-content it can't grow to contain the new arrangement of the hexes. You could set a min-height on the .main-content div:
.main-content {
background: url(../images/CBG_03.png) no-repeat;
min-height: 684px; // min-height
background-position: center;
max-width: 100%;
text-align: center;
margin-top: -215px;
position: relative;
z-index:1;
}
Likewise, if you need the height to remain the same at all times, you could use a media query for smaller screens and change the size of the hexagons on smaller screens so that they don't wrap to a new line.
*edit: it would also be more helpful if you post the code to jsfiddle or codepen instead of an imgur link so that we can edit and test the code ourselves.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments