Hello, I am brand new to web development and have encountered an issue on my website. Whenever the window is resized or viewed on a different screen, the navigation bar (which consists of rectangles and triangles) and text elements start moving around and some parts disappear entirely. I am wondering if setting the sizes in percentages would solve this problem. If so, I'm unsure which specific parts I need to adjust.
If you'd like to take a look at the issue yourself, please visit my website on Codecademy by clicking on this link and then click the full-screen button.
body {
background-image: url('http://www.rgbstock.com/cache1u7YbL/users/x/xy/xymonau/300/nXWyMYC.jpg')
}
#background {
background-color: white;
height: 100%;
width: 75%;
position: relative;
top: 100px;
margin-left: auto;
margin-right: auto;
}
#header {
word-wrap: break-word;
border: 1px solid black;
height: 30%;
width: 60%;
position: relative;
bottom: 90px;
margin-left: auto;
margin-right: auto;
}
.photocontainer {
border: transparent;
height: 55%;
width: 65%;
position: relative;
bottom: 60px;
margin-left: auto;
margin-right: auto;
}
.photocontainer img {
width:100%;
height:100%;
}
.navcontainer {
border: 1px solid black;
height: 10%;
width: 99%;
position: relative;
bottom: 70px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
.navcontainer .navbar .navigation li {
list-style: none;
display: block;
float: left;
margin: 1em;
text-align: center;
position: relative;
left: 15%;
}
.navcontainer .navbar .navigation li a {
font-family: quicksand;
text-decoration: none;
text-transform: uppercase;
display: block;
width: 110%;
color: #000000;
font-size: 20px;
vertical-align: middle;
line-height: 31px;
}
.navigation li a:hover {
margin-top: 2px;
}
.navbar {
margin: 0 auto;
width: 90%;
position: relative;
bottom: 42px;
}
.navcontainer .navbar .rectangle {
background: #f1e5cd;
height: 62px;
position: relative;
-moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
z-index: 500; /* the stack order: foreground */
margin: 3em 0;
}
.navcontainer .navbar .l-triangle-top {
border-color: #e7dbc3 transparent transparent;
border-style:solid;
border-width:50px;
height:0px;
width:0px;
position: relative;
float: left;
top: 1px;
left: -50px;
}
.navcontainer .navbar .l-triangle-bottom {
border-color: transparent transparent #e7dbc3;
border-style:solid;
border-width:50px;
height:0px;
width:0px;
position: relative;
float: left;
top: -40px;
left: -150px;
}
.navcontainer .navbar .r-triangle-top {
border-color: #e7dbc3 transparent transparent;
border-style:solid;
border-width:50px;
height:0px;
width:0px;
position: relative;
float: right;
right: -45px;
top: -107px;
}
.navcontainer .navbar .r-triangle-bottom {
border-color: transparent transparent #e7dbc3;
border-style:solid;
border-width:50px;
height:0px;
width:0px;
position: relative;
float: right;
top: -149px;
right: -145px;
} <div id="background">
<div id="header"></div>
<div class="navcontainer">
<div class="navbar">
<!-- the left side of the fork effect -->
<div class="l-triangle-top"></div>
<div class="l-triangle-bottom"></div>
<!-- the ribbon body -->
<div class="rectangle">
<!-- the navigation links -->
<ul class="navigation">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Order</a></li>
<li><a href="#">Contact</a></li>
</ul>
<!-- end the ribbon body -->
</div>
<!-- the right side of the fork effect -->
<div class="r-triangle-top"></div>
<div class="r-triangle-bottom"></div>
<!-- end container -->
</div>
</div;
<div class="photocontainer"></div>