We Keep Coding

how to make container unsticky after some point

Whenever the pink container touches the bottom of green container I want to make it unsticky. Is it possible? I tried but couldn't achieve it.
here's the code
also codepen link : Click Here
.container1 {
width: 500px;
height: 400px;
background-color: lightblue;
text-align: center;
margin: 0px auto;
position: sticky;
top: 0;
z-index: -1;
}
.container2 {
width: 300px;
height: 200px;
background-color: lightgreen;
text-align: center;
margin: 0px auto;
position: absolute;
top: 0;
left: 0;
z-index: -2;
}
.container3 {
width: 500px;
height: 400px;
background-color: pink;
text-align: center;
margin: 20px auto;
}
<div class="container1">
<div class="container2">
</div>
</div>
<div class="container3">
</div>

Background URL, only one images works

I am still in the process of learning HTML/CSS/Js and was following this tutorial on youtube.
https://www.youtube.com/watch?v=7MDJtw3ZF-4&t=893s
My issue is at around 20:15 time stamp, my eyes.png do not appear. I find this odd because my face.png shows up perfectly fine, which is in the same folder.
<p class="location"></p>
<div class="container">
<div class="face_body">
<div class="face">
<div class="eye_pan">
<div class="pan_area">
<div class="eye eye_l">
<div class="eye eye_r">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
and my css
html,body, .container{
height: 100%;
width: 100%;
outline: 0px;
margin: 0px;
padding: 0px;
border: 0px;
}
.location{
position: fixed;
top: 0px;
right: 0px;
margin: 0px;
background: rgba(255,255,255,0.4);
padding: 10px;
}
.container{
display: table;
background: rgb(251,220,0);
background: -webkit-linear-gradient(rgb(251,220,0), rgb(255,197,17));
background: -o-linear-gradient(rgb(251,220,0), rgb(255,197,17));
background: -moz-linear-gradient(rgb(251,220,0), rgb(255,197,17));;
background: linear-gradient(rgb(251,220,0), rgb(255,197,17));
}
.face_body{
display: table-cell;
vertical-align: middle;
text-align: center;
width: 100%;
}
.face{
height: 200px;
width: 200px;
margin: auto;
background: url(images/face1.1.png);
background-size: 173px 200px;
background-repeat: no-repeat;
}
.eye_pan{
display: table;
padding: 30px 50px;
}
.pan_area{
width: 70px;
height: 55px;
position: relative;
}
.eye{
height: 20px;
width: 20px;
border-radius: 5px;
position: absolute;
margin-left: 5px;
transition: .5s height ease-in-out;
border: 1px solid red;
background: url(images/eyes.png);
}
.eye_r{
top: 0px;
left: 20px;
}
.eye_l{
top: 50px;
left: 25px;
}
any reasons on why my eyes.png are not showing would be great. Thanks.

Your .eye url background is probably linking to a wrong URL file or it is simply out of the view.
Try inserting background-size: cover; or set it a background-size if the images is loding fine.
html,body, .container{
height: 100%;
width: 100%;
outline: 0px;
margin: 0px;
padding: 0px;
border: 0px;
}
.location{
position: fixed;
top: 0px;
right: 0px;
margin: 0px;
background: rgba(255,255,255,0.4);
padding: 10px;
}
.container{
display: table;
background: rgb(251,220,0);
background: -webkit-linear-gradient(rgb(251,220,0), rgb(255,197,17));
background: -o-linear-gradient(rgb(251,220,0), rgb(255,197,17));
background: -moz-linear-gradient(rgb(251,220,0), rgb(255,197,17));;
background: linear-gradient(rgb(251,220,0), rgb(255,197,17));
}
.face_body{
display: table-cell;
vertical-align: middle;
text-align: center;
width: 100%;
}
.face{
height: 200px;
width: 200px;
margin: auto;
background: url(https://images.vexels.com/media/users/3/134743/isolated/preview/97ae591756f3dc69db88c09fd097319a-sad-face-emoji-emoticon-by-vexels.png);
background-size: 173px 200px;
background-repeat: no-repeat;
}
.eye_pan{
display: table;
padding: 30px 50px;
}
.pan_area{
width: 70px;
height: 55px;
position: relative;
}
.eye{
height: 20px;
width: 20px;
border-radius: 5px;
position: absolute;
margin-left: 5px;
transition: .5s height ease-in-out;
border: 1px solid red;
background: url(//cdn.playbuzz.com/cdn/e732686f-35b2-4be6-a5fa-52f388bb0d0d/3637262a-2c14-43b0-9be2-b2174055f790_560_420.jpg);
background-size:cover;
}
.eye_r{
top: 0px;
left: 20px;
}
.eye_l{
top: 50px;
left: 25px;
}
<p class="location"></p>
<div class="container">
<div class="face_body">
<div class="face">
<div class="eye_pan">
<div class="pan_area">
<div class="eye eye_l">
<div class="eye eye_r">
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Check if your spellings are correct like 'eye' instead of 'eyes' also check the file format if its say 'jpg' and not 'png'.
Try clearing your browser cache just incase your browser did not load new files

Apply correct CSS syntax for background property and check whether your image path is correct or not.
background: url('images/eyes.png');
Try this and let me know if problem is still raised.
Have a nice day, Cheers !!!

How to center logo in navbar when there's another element in the navbar also?

In my navigation bar there is a logo which should be centered, and a menu button image (3 lines) which should be floated left. I've gotten the menu button to float left but just cannot seem to get the logo to be in the exact center of navbar, it's always a bit to the right.
I've tried puttin them both in divs and setting div width to 50%, then float the image left so it makes it centered but no luck.
HTML:
<div id="resp-navbar">
<div id="resp-nav-contents">
<img id="exp-menu-img" src="3lines.png">
<img id="resp-logo" src="MSLOGO.jpg">
</div>
</div>
CSS:
#resp-navbar{
height: 15%;
text-align: center;
width: 100%;
display: inline-block;
position: fixed;
z-index:51;
background-color: white;
border-bottom: solid;
border-width: 1px;
border-color: #afafaf;
}
#resp-nav-contents{
min-width: 300px;
}
#exp-menu-img{
height: 30%;
position: absolute;
left: 2%;
top: 50%;
transform: translateY(-50%);
opacity: 0.4;
cursor: pointer;
}
#resp-logo{
height: 50%;
position: absolute;
top: 50%;
transform: translateY(-50%);
display: inline;
}

Added: left: 0; right: 0; margin: auto; to #resp-logo
#resp-navbar{
height: 15%;
text-align: center;
width: 100%;
display: inline-block;
position: fixed;
z-index:51;
background-color: white;
border-bottom: solid;
border-width: 1px;
border-color: #afafaf;
}
#resp-nav-contents{
min-width: 300px;
}
#exp-menu-img{
height: 30%;
position: absolute;
left: 2%;
top: 50%;
transform: translateY(-50%);
opacity: 0.4;
cursor: pointer;
}
#resp-logo {
height: 50%;
position: absolute;
top: 50%;
transform: translateY(-50%);
display: inline;
left: 0;
right: 0;
margin: auto;
}
<div id="resp-navbar">
<div id="resp-nav-contents">
<img id="exp-menu-img" src="https://placehold.it/20x20">
<img id="resp-logo" src="https://placehold.it/500x100">
</div>
</div>

Try setting the menu icon as position: absolute; and normalize the rest

Use the following which may help
<div id="resp-navvar>
<img id="exp-menu-img" src="3lines.png">
<img id="resp-logo" src="MSLOGO.jpg">
#resp-logo {
positions:absolute;
left:50%;
Transform:translate(-50%);
Width- custom, height- custom
}
Don’t forget to put the root div position to relative if things don’t work

Remove these from #resp-logo
position: absolute; display: inline;
Or You can force it to center using margins.

Positioning trouble

So I'm having some issues with putting a some content with putting some content below my hero / jumbotron image. The underline stuff is not important! It is animtated on load with some jquery. Code Below:
JSFiddle
I want to "What we do" content below the jumbotron image
HTML:
<div class="hero">
<div class="hero-text">
<h1 class="invis-selection">Header Text</h1>
<div id="underline-1"></div>
<div id="underline-2"></div>
<div id="underline-3"></div>
<div id="underline-4"></div>
</div>
<img class="hero-img" src="img/city-night.png" alt="Hero Image" />
</div>
<div class="wwd-main">
<h1>What we do</h1>
</div>
CSS:
.hero{
position: fixed;
width: 100%;
height: 100%;
text-align: center;
color: #fff;
font-family: 'Lato', sans-serif;
}
.hero-text {
position: absolute;
width: 640px;
height: 125px;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.hero-text h1{
position: absolute;
width: 640px;
height: 125px;
font-size: 7.1em;
z-index: 1;
margin-top: -15px;
}
.hero-img {
width: 100%;
height: 100%;
}
.wwd-main {
position: relative;
height: 30%;
background-color: #eeeeee;
z-index: 100;
}

This will solve your problem, however as your screen gets vertically smaller you will notice the text at the bottom slowly disappearing. This is because you are using %'s to define the dimensions of the elements, as the screen shrinks the box will be smaller relative to your screen size. To solve this, change the 10% I used for .wwd-main to 90px.
body {
margin: 0;
padding: 0;
}
.hero{
position: fixed;
width: 100%;
height: 100%;
text-align: center;
color: #fff;
font-family: 'Lato', sans-serif;
}
.hero-text {
position: absolute;
width: 640px;
height: 125px;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.hero-text h1{
position: absolute;
width: 640px;
height: 125px;
font-size: 7.1em;
z-index: 1;
margin-top: -15px;
}
.hero-img {
width: 100%;
height: 100%;
}
.wwd-main {
position: fixed;
bottom:0;
width:100%;
height: 10%;
background-color: #eeeeee;
z-index: 100;
}
<div class="hero">
<div class="hero-text">
<h1 class="invis-selection">Header Text</h1>
</div>
<img class="hero-img" src="http://www.mrwallpaper.com/wallpapers/Shanghai-City-Night-1920x1080.jpg" alt="Hero Image" />
</div>
<div class="wwd-main">
<h1>What we do</h1>
</div>
edit: What I did to solve the issue was change .wwd-main from position:relative; to position:fixed; and added bottom:0; This ensures the text will always be fixed to the bottom of your screen with a 0px offset.

You could just remove position: fixed; from .hero.
And add this to your CSS, to collapse the margins:
.wwd-main > h1
{
margin: 0;
}

You have defined the Height and Width of the text twice.
Here is the changed version of the code.
You can now customize your styling to make it look the way you want.
PS: I would recommend you to use Bootstrap or any other libraries.
body {
margin: 0;
padding: 0;
}
.hero{
width: 100%;
height: 100%;
text-align: center;
color: #fff;
font-family: 'Lato', sans-serif;
}
.hero-text {
position: fixed;
width: 640px;
height: 125px;
top: 20%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.hero-text h1{
position: absolute;
width: 640px;
height: 125px;
font-size: 7.1em;
z-index: 1;
margin-top: -15px;
}
.hero-img {
width: 100%;
height: 100%;
}
.wwd-main {
position: relative;
height: 20%;
background-color: #eeeeee;
z-index: 100;
}
<div class="hero">
<div class="hero-text">
<h1 class="invis-selection">Header Text</h1>
</div>
<img class="hero-img" src="http://www.mrwallpaper.com/wallpapers/Shanghai-City-Night-1920x1080.jpg" alt="Hero Image" />
</div>
<div class="wwd-main">
<h1>What we do</h1>
</div>
JSFiddle Link

CSS : round_div is not responsive to its parent div

I have .
when I resize my window then it looks like
It is not responsive.
.discussion_round_div {
width: 70px;
height: 70px;
border-radius: 100px;
border: thin #edf1f2 solid;
position: absolute;
background: #FFFFFF;
left: 36%;
top: 20px;
}
.discussion_round_div_icon{
position: relative;
top: 18%;
font-size: 20px;
height: 25px;
color:#adadad;
}
.discussion_icon_text{
text-align: center;
font-size: 10px;
color: #3d4354;
}
.padding_30{
padding:30px !important;
}
.bg-dark{
background:#000;
}
.discussion_small_round_div {
width: 25px;
height: 25px;
border-radius: 50%;
position: relative;
background: #2d3446;
bottom: 9px;
left: 15px;
float:right;
}
.discussion_small_round_div:after {
content: '\2807';
font-size: 1.5em;
color:white;
position: absolute;
left: 9px;
top: 1px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="panel discussion_panel_div no_background no_box_shadow" style="position: relative;">
<div class="panel-heading padding_30 no_border_radius bg-dark set_padding_0">
<div class="discussion_small_round_div pull-right cursor_pointer" id="pending"></div>
</div>
<div class="discussion_round_div">
<div class="text-center discussion_round_div_icon">
<span class="glyphicon glyphicon-check "></span>
<p class="discussion_icon_text">Approved</p>
</div>
</div>
</div>
PS: The round div should be in the center of panel div as per the image
Can I do it without using media query?
Any help would be great.
Thank You.

As long as you have width defined it is fairly easy:
.discussion_round_div {
width: 70px;
height: 70px;
border-radius: 100px;
border: thin #edf1f2 solid;
position: absolute;
background: #FFFFFF;
left: 50%; /*changed*/
top: 20px;
margin-left: -35px; /* added */
}

could you try to put :
.discussion_round_div {
width: 70px;
height: 70px;
border-radius: 100px;
border: thin #edf1f2 solid;
position: absolute;
background: #FFFFFF;
left: 50%;
margin-left: -35px;
top: 20px;
}
and tell us.
PD: this revision of cs is not tested

Change your css to this.
.discussion_round_div {
width: 70px;
height: 70px;
border-radius: 100px;
border: thin #edf1f2 solid;
position: absolute;
background: #FFFFFF;
left: 0;
top: 20px;
right: 0;
margin: auto;
}
This will keep round div always center. Hope this helps you.

.discussion_round_div {
width: 70px;
height: 70px;
border-radius: 100px;
border: thin #edf1f2 solid;
/*position: absolute;*/
position:relative;
margin:auto ;
margin-top:-62px;
background: #FFFFFF;
/*left: 36%;*/
top: 20px;
}
.discussion_round_div_icon{
position: relative;
top: 18%;
font-size: 20px;
height: 25px;
color:#adadad;
}
.discussion_icon_text{
text-align: center;
font-size: 10px;
color: #3d4354;
}
.padding_30{
padding:30px !important;
}
.bg-dark{
background:#000;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="panel discussion_panel_div no_background no_box_shadow" style="position: relative;">
<div class="panel-heading padding_30 no_border_radius bg-dark set_padding_0">
</div>
<div class="discussion_round_div">
<div class="text-center discussion_round_div_icon">
<span class="glyphicon glyphicon-check "></span>
<p class="discussion_icon_text">Approved</p>
</div>
</div>
</div>

A good way to center an absolute positioned element is by using:
left: 50%;
transform: translateX(-50%);
This is a better version of the classic trick that uses a negative margin since you don't need to know the width of your centered element for this solution to work.
So, just add:
.discussion_round_div {
width: 70px;
height: 70px;
border-radius: 100px;
border: thin #edf1f2 solid;
position: absolute;
background: #FFFFFF;
left: 50%;
top: 20px;
transform: translateX(-50%);
}
This is a JSFiddle. I think is perfectly centered...

If you want the white approved element to be in the center even if you resize the browser then you can use something like:
.class{
position:absolute;
left:50%;
margin-left: -100px; // if your white approved element width is 200px then set margin to -100
}
Good luck