Sudip Das Sudip Das - 20 days ago 7
CSS Question

Content of div is not responsive

enter image description here

The content of the div is not working as responsive manner.When I am trying to reduce the size of the browse then inner content of the div is coming out.

I want to make this responsive means when i will reduce the size of the browser after a threshold point it will come as single line content and nothing will come out.

here is my code which one i have written ===>

abc.htm





.projects{
position: absolute;
top: 110%;
height: 110% !important;
width: 100% !important;
background-color: #363636;
margin-left: auto;
margin-right: auto;
text-align: center;
vertical-align: top;

}
.project_heading{
position: absolute;
top:5%;
left: 40%;
font-family:Courier, Monaco, monospace;
color: #9c9c9c;
font-size: 1.8em;
letter-spacing: 8px;
border: 1px solid black;
}
.skill_sets{
position: absolute;
height: 400px;
width: 200px;
left: 70%;
top: 20%;
border: 1px solid black;
}

.skills_heading{
position: absolute;
top:25%;

height: 40px;
width: 100%;
/*border: 1px solid black;*/
font-family:Courier, Monaco, monospace;
color: #9c9c9c;
font-size: 1.8em;
/*letter-spacing: 8px;*/
background-color: #3a3a3a;
margin: 40 0px;
}

<html>
<head>
<link rel="stylesheet" media="screen" href="cc.css">

</head>
<body>
<div id="content" class="content">
<!-- <div id="doing_box_closed" class="doing_box_closed">
</div> -->

<div id="projects" class="projects">
<p id="project_heading" class="project_heading">PROJECTS</p>
<div id="skill_sets" class="skill_sets">
<p id="skills_heading" class="skills_heading">Skills</p>
</div>

</div>


</div>
</body>
</html>




Answer

Problem is with your .skill_sets Try this:

.skill_sets {
    /* position: absolute; */
    height: 400px;
    /* width: 200px; */
    /* left: 70%; */
    top: 20%;
    border: 1px solid black;
}

When you use position:absolute it forces the position of an element and you are bundling it with left:70% and also with a definite width:200px so its obvious that it'll go out of the container.

Comments