RandomRyan
Member
- Nov 7, 2013
- 37
- 4
Hey
How would I prevent the sidebar from overlapping the content on each section div element? So the text would hit the right side of the sidebar when responsive.
Thanks!
(Photo of the problem)
How would I prevent the sidebar from overlapping the content on each section div element? So the text would hit the right side of the sidebar when responsive.
Thanks!
(Photo of the problem)
You must be registered for see images attach
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<link type="text/css" rel="stylesheet" href="css/style.css">
<script src="You must be registered for see links"></script>
<link rel="stylesheet" href="You must be registered for see links" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="You must be registered for see links" rel="stylesheet">
<script src="js/main.js"></script>
<title>Website</title>
</head>
<body>
<div class="outer-container">
<div class="sidebar">
<div class="profile">
<img src="images/profile.jpg" alt="">
<h3>name goes here</h3>
<p>Programmer</p>
</div>
<!--menu item-->
<ul>
<li>
<a href="index.html" class="active" id="home">
<span class="icon"><i class="fas fa-home"></i></span>
<span class="item">Home</span>
</a>
</li>
<li>
<a id="formButton" >
<span class="icon"><i class="fas fa-home"></i></span>
<span class="item">Form Validation</span>
</a>
</li>
<li>
<a href="">
<span class="icon"><i class="fas fa-home"></i></span>
<span class="item">My Resume</span>
</a>
</li>
<li>
<a href="#" target="_blank">
<span class="icon"><i class="fas fa-home"></i></span>
<span class="item">LinkedIn</span>
</a>
</li>
<li>
<a href="./blog" target="_blank">
<span class="icon"><i class="fas fa-home"></i></span>
<span class="item">Blog</span>
</a>
</li>
<li>
<a href="">
<span class="icon"><i class="fas fa-home"></i></span>
<span class="item">My JQuery Demo</span>
</a>
</li>
<li>
<a id="ajaxButton">
<span class="icon"><i class="fas fa-home"></i></span>
<span class="item">AJAX</span>
</a>
</li>
</ul>
</div>
<section id="main">
<div class="main-container">
<h1>name</h1>
<p>I'm stupid with CSS</p>
</div>
</section>
<section id="about">
<div class="aboutus">
<h2>About</h2>
<p>Something about myself...</p>
</div>
</section>
<section id="skills">
<div class="skills">
<h2>Skills</h2>
<p>SKILLS GOES HERE</p>
</div>
</section>
<section id="mywork">
<div class="mywork">
<h2>My Work</h2>
<p>ITEM BOXES GOES HERE</p>
</div>
</section>
<section id="contact">
<div class="contact">
<h2>contact</h2>
<p>contact goes</p>
</div>
</section>
</div>
</div>
</body>
</html>
@import url('You must be registered for see links
*{
list-style: none;
text-decoration: none;
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Open Sans', sans-serif;
}
#main {
padding: 450px;
background-color: #0f0b0b;
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
}
body {
background: #f5f6fa;
}
#outer-container {
display: table;
width: 100%;
height: 100%;
}
/*Sidebar */
.sidebar{
background: rgb(5, 68, 104);
position: fixed;
top: 0;
left: 0;
width: 225px;
height: 100%;
padding: 20px 0;
transition: all 0.5s ease;
z-index: 1;
}
.sidebar .profile{
margin-bottom: 30px;
text-align: center;
}
.sidebar .profile img {
display: block;
width: 100px;
height: 100px;
border-radius: 50%;
margin: 0 auto;
}
.sidebar .profile h3{
color: #ffffff;
margin: 10px 0 5px;
}
.sidebar .profile p{
color: rgb(206, 240, 253);
font-size: 14px;
}
.sidebar ul li a {
display: block;
padding: 13px 30px;
border-bottom: 1px solid #10558d;
color: rgb(241, 237, 237);
font-size: 16px;
position: relative;
}
.sidebar ul li a .icon{
color: #dee4ec;
width: 30px;
display: inline-block;
}
/* Sidebar Link hover */
.sidebar ul li a:hover,
.sidebar ul li a.active{
color: #0c7db1;
background:white;
border-right: 2px solid rgb(5, 68, 104);
}
.sidebar ul li a:hover .icon,
.sidebar ul li a.active .icon{
color: #0c7db1;
}
.sidebar ul li a:hover:before,
.sidebar ul li a.active:before{
display: block;
}
/* about me */
#about {
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: 140px;
background: #858585;
z-index: 0;
transform: skewY(0deg);
position: relative;
}
.aboutus h2 {
font-family: Arial;
text-align: center;
font-size: 16px;
}
/* skills */
#skills {
top: 0;
bottom: 0;
right: 0;
left: 0;
width: fixed;
height: 140px;
background: #FEFEFE;
z-index: 0;
transform: skewY(0deg);
position: relative;
}
.skills h2 {
font-family: Arial;
text-align: center;
font-size: 16px;
}
/* mywork */
#mywork {
top: 0;
bottom: 0;
right: 0;
left: 0;
width: fixed;
height: 140px;
background: #FEFEFE;
z-index: 0;
transform: skewY(0deg);
position: relative;
}
.mywork h2 {
font-family: Arial;
text-align: center;
font-size: 16px;
}
/* contact */
#contact {
top: 0;
bottom: 0;
right: 0;
left: 0;
width: fixed;
height: 140px;
background: #FEFEFE;
z-index: 0;
transform: skewY(0deg)
}
.contact h2 {
font-family: Arial;
text-align: center;
font-size: 16px;
}
