When a user clicks the "burger nav" in the mobile version, whatever item they select, a popup will appear and my problem is that the popup doesn't fit there whole screen and scrolling. When you scroll down, it reveals a portion that isn't apart of the popup. It works fine when the users phone is position vertically because I added "height: 100vh" to the popup in the media query. But when the users phone is position horizontally, it doesn't work. I Tried everything and I cannot fix it. I added "position: fixed" which seemed to work but when you scroll down it would be there but does away when you keep scrolling which is not what I want.Ibasically want for when a user scrolls down on the mobile, for the popup to be responsive and stay 100% height. Here is my code which is uploaded to a code pen.
CSS WHEN HORIZONTAL
@media screen and (max-width: 667px) {
#burger-nav{
display: block;
width: 100%;
height: 40px;
background: url(burgerlogo.png) no-repeat 98% center;
background-size: 30px 30px;
background-color: white;
}
#burger-nav.show{
background-color: #f97072;
}
#nav-menu{
background-color: white;
margin: 0;
padding:0;
width: 100%;
height:auto;
overflow: hidden;
display: none;
}
#nav-menu.open{
display: block;
z-index: 100;
position: absolute;
}
#nav-menu li{
float: none;
padding: 10px;
position: relative;
text-align: right;
top:0;
left:0;
cursor: pointer;
border-bottom: 0.1px solid #f8f9fb;
display: block;
font-weight: bold;
}
#nav-menu li:hover {
background-color: #f8f9fb;
}
#name-div{
position: absolute;
top: 8%;
left: 0%;
z-index: 10;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-o-user-select: none;
}
#name.show{
position: relative;
bottom: 40px;
}
.bubbles li:nth-child(1) {
top:100px;
left: 300px;
}
.bubbles li:nth-child(2) {
left: 100px;
top:100px;
}
.bubbles li:nth-child(3) {
left: 200px;
top:0px;
}
.bubbles li:nth-child(4) {
left: 150px;
top:200px;
}
.bubbles li:nth-child(5) {
left: 250px;
top:200px;
}
.bubbles li:nth-child(6) {
left: 250px;
top:200px;
}
#job-popup{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
position:absolute;
top:0;
left:0;
z-index: 102;
background: hsla(0,0%,97%,.7);
display: none;
}
#x-div1{
width: 70px;
height: 40px;
border-radius: 100%;
background: #1e1e1e;
opacity: 0.3;
border-radius: 0 25px 25px 0;
position: relative;
left:0px;
top:1%;
z-index: 1000;
cursor: pointer;
display: none;
}
#x-div1:hover{
background-color: rgb(218, 85, 47);
}
#xicon1{
color: white;
font-size: 1.2em;
position: relative;
top:10px;
left: 0;
z-index: 1002;
bottom: 20px;
font-weight: bold;
display: none;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-o-user-select: none;
}
#job-box1{
width: 100%;
height: 100%;
position: absolute;
left:0;
top:0;
padding-right: 0;
background-color: white;
word-wrap: break-word;
display: none;
}
#job-text1{
text-align: center;
display: none;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-o-user-select: none;
}
/* End of Job CSS --------------------------------------------------------------------------------------- */
#contact-popup{
width: 100%;
height: 100%;
position:absolute;
top:0;
left:0;
z-index: 102;
background: hsla(0,0%,97%,.7);
display: none;
}
#x-div2{
width: 70px;
height: 40px;
border-radius: 100%;
background: #1e1e1e;
opacity: 0.3;
border-radius: 0 25px 25px 0;
position: relative;
left:0px;
top:1%;
z-index: 1000;
cursor: pointer;
display: none;
}
#x-div2:hover{
background-color: rgb(218, 85, 47);
}
#xicon2{
color: white;
font-size: 1.2em;
position: relative;
top:10px;
left: 0;
z-index: 1002;
bottom: 20px;
font-weight: bold;
display: none;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-o-user-select: none;
}
#contact-box2{
width: 100%;
height: 100%;
position: absolute;
left:0;
top:0;
padding-right: 0;
background-color: white;
word-wrap: break-word;
display: none;
}
#contact-text2{
text-align: center;
display: none;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-o-user-select: none;
}
/* End of Contact CSS --------------------------------------------------------------------------------------- */
#press-popup{
width: 100%;
height: 100%;
position:absolute;
top:0;
left:0;
z-index: 102;
background: hsla(0,0%,97%,.7);
display: none;
}
#x-div3{
width: 70px;
height: 40px;
border-radius: 100%;
background: #1e1e1e;
opacity: 0.3;
border-radius: 0 25px 25px 0;
position: relative;
left:0px;
top:1%;
z-index: 1000;
cursor: pointer;
display: none;
}
#x-div3:hover{
background-color: rgb(218, 85, 47);
}
#xicon3{
color: white;
font-size: 1.2em;
position: relative;
top:10px;
left: 0;
z-index: 1002;
bottom: 20px;
font-weight: bold;
display: none;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-o-user-select: none;
}
#press-box3{
width: 100%;
height: 100%;
position: absolute;
left:0;
top:0;
padding-right: 0;
background-color: white;
word-wrap: break-word;
display: none;
}
#press-text3{
text-align: center;
display: none;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-o-user-select: none;
}
/* End of Legal CSS --------------------------------------------------------------------------------------- */
#legal-popup{
width: 100%;
height: 100%;
position:absolute;
top:0;
left:0;
z-index: 102;
background: hsla(0,0%,97%,.7);
display: none;
}
#x-div4{
width: 70px;
height: 40px;
border-radius: 100%;
background: #1e1e1e;
opacity: 0.3;
border-radius: 0 25px 25px 0;
position: relative;
left:0px;
top:1%;
z-index: 1000;
cursor: pointer;
display: none;
}
#x-div4:hover{
background-color: rgb(218, 85, 47);
}
#xicon4{
color: white;
font-size: 1.2em;
position: relative;
top:10px;
left: 0;
z-index: 1002;
bottom: 20px;
font-weight: bold;
display: none;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-o-user-select: none;
}
#legal-box4{
width: 100%;
height: 100%;
position: absolute;
left:0;
top:0;
padding-right: 0;
background-color: white;
word-wrap: break-word;
display: none;
}
#legal-text4{
text-align: center;
display: none;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-o-user-select: none;
}
/* End of Legal CSS --------------------------------------------------------------------------------------- */
#support-popup{
width: 100%;
height: 100%;
position:absolute;
top:0;
left:0;
z-index: 102;
background: hsla(0,0%,97%,.7);
display: none;
}
#x-div5{
width: 70px;
height: 40px;
border-radius: 100%;
background: #1e1e1e;
opacity: 0.3;
border-radius: 0 25px 25px 0;
position: relative;
left:0px;
top:1%;
z-index: 1000;
cursor: pointer;
display: none;
}
#x-div5:hover{
background-color: rgb(218, 85, 47);
}
#xicon5{
color: white;
font-size: 1.2em;
position: relative;
top:10px;
left: 0;
z-index: 1002;
bottom: 20px;
font-weight: bold;
display: none;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-o-user-select: none;
}
#support-box5{
width: 100%;
height: 100%;
position: absolute;
left:0;
top:0;
padding-right: 0;
background-color: white;
word-wrap: break-word;
display: none;
}
#support-text5{
text-align: center;
display: none;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-o-user-select: none;
}
}
CSS WHEN VERTICAL
@media screen and (max-width: 375px) {
#burger-nav{
display: block;
width: 100%;
height: 40px;
background: url(burgerlogo.png) no-repeat 98% center;
background-size: 30px 30px;
background-color: white;
}
#burger-nav.show{
background-color: #f97072;
}
#nav-menu{
background-color: white;
margin: 0;
padding:0;
width: 100%;
height:auto;
overflow: hidden;
display: none;
}
#nav-menu.open{
display: block;
z-index: 100;
position: absolute;
}
#nav-menu li{
float: none;
padding: 10px;
position: relative;
text-align: right;
top:0;
left:0;
cursor: pointer;
border-bottom: 0.1px solid #f8f9fb;
display: block;
font-weight: bold;
}
#nav-menu li:hover {
background-color: #f8f9fb;
}
#name-div{
position: absolute;
top: 30%;
left: 0%;
z-index: 10;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-o-user-select: none;
}
#name{
font-size: 4em;
}
#name.show{
position: relative;
bottom: 40px;
}
.bubbles li:nth-child(1) {
top:100px;
left: 300px;
}
.bubbles li:nth-child(2) {
left: 100px;
top:400px;
}
.bubbles li:nth-child(3) {
left: 200px;
top:0px;
}
.bubbles li:nth-child(4) {
left: 150px;
top:200px;
}
.bubbles li:nth-child(5) {
left: 250px;
top:200px;
}
.bubbles li:nth-child(6) {
left: 250px;
top:200px;
}
#job-popup{
width: 100%;
height: 100%;
position:absolute;
top:0;
left:0;
z-index: 102;
background: hsla(0,0%,97%,.7);
display: none;
}
#x-div1{
width: 70px;
height: 40px;
border-radius: 100%;
background: #1e1e1e;
opacity: 0.3;
border-radius: 0 25px 25px 0;
position: relative;
left:0px;
top:1%;
z-index: 1000;
cursor: pointer;
display: none;
}
#x-div1:hover{
background-color: rgb(218, 85, 47);
}
#xicon1{
color: white;
font-size: 1.2em;
position: relative;
top:10px;
left: 0;
z-index: 1002;
bottom: 20px;
font-weight: bold;
display: none;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-o-user-select: none;
}
#job-box1{
width: 100%;
height: 100%;
position: absolute;
left:0;
top:0;
padding-right: 0;
background-color: white;
word-wrap: break-word;
display: none;
}
#job-text1{
text-align: center;
display: none;
position: relative;
top:6%;
left:0;
font-size: 1.2em;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-o-user-select: none;
}
/* End of Job CSS --------------------------------------------------------------------------------------- */
#contact-popup{
width: 100%;
height: 100%;
position:absolute;
top:0;
left:0;
z-index: 102;
background: hsla(0,0%,97%,.7);
display: none;
}
#x-div2{
width: 70px;
height: 40px;
border-radius: 100%;
background: #1e1e1e;
opacity: 0.3;
border-radius: 0 25px 25px 0;
position: relative;
left:0px;
top:1%;
z-index: 1000;
cursor: pointer;
display: none;
}
#x-div2:hover{
background-color: rgb(218, 85, 47);
}
#xicon2{
color: white;
font-size: 1.2em;
position: relative;
top:10px;
left: 0;
z-index: 1002;
bottom: 20px;
font-weight: bold;
display: none;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-o-user-select: none;
}
#contact-box2{
width: 100%;
height: 100%;
position: absolute;
left:0;
top:0;
padding-right: 0;
background-color: white;
word-wrap: break-word;
display: none;
}
#contact-text2{
text-align: center;
display: none;
position: relative;
top:6%;
left:0;
font-size: 1.2em;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-o-user-select: none;
}
/* End of Contact CSS --------------------------------------------------------------------------------------- */
#press-popup{
width: 100%;
height: 100%;
position:absolute;
top:0;
left:0;
z-index: 102;
background: hsla(0,0%,97%,.7);
display: none;
}
#x-div3{
width: 70px;
height: 40px;
border-radius: 100%;
background: #1e1e1e;
opacity: 0.3;
border-radius: 0 25px 25px 0;
position: relative;
left:0px;
top:1%;
z-index: 1000;
cursor: pointer;
display: none;
}
#x-div3:hover{
background-color: rgb(218, 85, 47);
}
#xicon3{
color: white;
font-size: 1.2em;
position: relative;
top:10px;
left: 0;
z-index: 1002;
bottom: 20px;
font-weight: bold;
display: none;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-o-user-select: none;
}
#press-box3{
width: 100%;
height: 100%;
position: absolute;
left:0;
top:0;
padding-right: 0;
background-color: white;
word-wrap: break-word;
display: none;
}
#press-text3{
text-align: center;
display: none;
position: relative;
top:6%;
left:0;
font-size: 1.2em;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-o-user-select: none;
}
/* End of Legal CSS --------------------------------------------------------------------------------------- */
#legal-popup{
width: 100%;
height: 100%;
position:absolute;
top:0;
left:0;
z-index: 102;
background: hsla(0,0%,97%,.7);
display: none;
}
#x-div4{
width: 70px;
height: 40px;
border-radius: 100%;
background: #1e1e1e;
opacity: 0.3;
border-radius: 0 25px 25px 0;
position: relative;
left:0px;
top:1%;
z-index: 1000;
cursor: pointer;
display: none;
}
#x-div4:hover{
background-color: rgb(218, 85, 47);
}
#xicon4{
color: white;
font-size: 1.2em;
position: relative;
top:10px;
left: 0;
z-index: 1002;
bottom: 20px;
font-weight: bold;
display: none;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-o-user-select: none;
}
#legal-box4{
width: 100%;
height: 100%;
position: absolute;
left:0;
top:0;
padding-right: 0;
background-color: white;
word-wrap: break-word;
display: none;
}
#legal-text4{
text-align: center;
display: none;
position: relative;
top:6%;
left:0;
font-size: 1.2em;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-o-user-select: none;
}
/* End of Legal CSS --------------------------------------------------------------------------------------- */
#support-popup{
width: 100%;
height: 100%;
position:absolute;
top:0;
left:0;
z-index: 102;
background: hsla(0,0%,97%,.7);
display: none;
}
#x-div5{
width: 70px;
height: 40px;
border-radius: 100%;
background: #1e1e1e;
opacity: 0.3;
border-radius: 0 25px 25px 0;
position: relative;
left:0px;
top:1%;
z-index: 1000;
cursor: pointer;
display: none;
}
#x-div5:hover{
background-color: rgb(218, 85, 47);
}
#xicon5{
color: white;
font-size: 1.2em;
position: relative;
top:10px;
left: 0;
z-index: 1002;
bottom: 20px;
font-weight: bold;
display: none;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-o-user-select: none;
}
#support-box5{
width: 100%;
height: 100%;
position: absolute;
left:0;
top:0;
padding-right: 0;
background-color: white;
word-wrap: break-word;
display: none;
}
#support-text5{
text-align: center;
display: none;
position: relative;
top:6%;
left:0;
font-size: 1.2em;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-o-user-select: none;
}
}
When a user clicks the "burger nav" in the mobile version, whatever item they select, a popup will appear and my problem is that the popup doesn't fit there whole screen and scrolling. When you scroll down, it reveals a portion that isn't apart of the popup. It works fine when the users phone is position vertically because I added "height: 100vh" to the popup in the media query. But when the users phone is position horizontally, it doesn't work. I Tried everything and I cannot fix it. I added "position: fixed" which seemed to work but when you scroll down it would be there but does away when you keep scrolling which is not what I want.Ibasically want for when a user scrolls down on the mobile, for the popup to be responsive and stay 100% height. Here is my code which is uploaded to a code pen.
http://codepen.io/anon/pen/dWyKaE
CSS WHEN HORIZONTAL
@media screen and (max-width: 667px) {
#burger-nav{
display: block;
width: 100%;
height: 40px;
background: url(burgerlogo.png) no-repeat 98% center;
background-size: 30px 30px;
background-color: white;
}
#burger-nav.show{
background-color: #f97072;
}
#nav-menu{
background-color: white;
margin: 0;
padding:0;
width: 100%;
height:auto;
overflow: hidden;
display: none;
}
#nav-menu.open{
display: block;
z-index: 100;
position: absolute;
}
#nav-menu li{
float: none;
padding: 10px;
position: relative;
text-align: right;
top:0;
left:0;
cursor: pointer;
border-bottom: 0.1px solid #f8f9fb;
display: block;
font-weight: bold;
}
#nav-menu li:hover {
background-color: #f8f9fb;
}
#name-div{
position: absolute;
top: 8%;
left: 0%;
z-index: 10;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-o-user-select: none;
}
#name.show{
position: relative;
bottom: 40px;
}
.bubbles li:nth-child(1) {
top:100px;
left: 300px;
}
.bubbles li:nth-child(2) {
left: 100px;
top:100px;
}
.bubbles li:nth-child(3) {
left: 200px;
top:0px;
}
.bubbles li:nth-child(4) {
left: 150px;
top:200px;
}
.bubbles li:nth-child(5) {
left: 250px;
top:200px;
}
.bubbles li:nth-child(6) {
left: 250px;
top:200px;
}
#job-popup{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
position:absolute;
top:0;
left:0;
z-index: 102;
background: hsla(0,0%,97%,.7);
display: none;
}
#x-div1{
width: 70px;
height: 40px;
border-radius: 100%;
background: #1e1e1e;
opacity: 0.3;
border-radius: 0 25px 25px 0;
position: relative;
left:0px;
top:1%;
z-index: 1000;
cursor: pointer;
display: none;
}
#x-div1:hover{
background-color: rgb(218, 85, 47);
}
#xicon1{
color: white;
font-size: 1.2em;
position: relative;
top:10px;
left: 0;
z-index: 1002;
bottom: 20px;
font-weight: bold;
display: none;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-o-user-select: none;
}
#job-box1{
width: 100%;
height: 100%;
position: absolute;
left:0;
top:0;
padding-right: 0;
background-color: white;
word-wrap: break-word;
display: none;
}
#job-text1{
text-align: center;
display: none;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-o-user-select: none;
}
/* End of Job CSS --------------------------------------------------------------------------------------- */
#contact-popup{
width: 100%;
height: 100%;
position:absolute;
top:0;
left:0;
z-index: 102;
background: hsla(0,0%,97%,.7);
display: none;
}
#x-div2{
width: 70px;
height: 40px;
border-radius: 100%;
background: #1e1e1e;
opacity: 0.3;
border-radius: 0 25px 25px 0;
position: relative;
left:0px;
top:1%;
z-index: 1000;
cursor: pointer;
display: none;
}
#x-div2:hover{
background-color: rgb(218, 85, 47);
}
#xicon2{
color: white;
font-size: 1.2em;
position: relative;
top:10px;
left: 0;
z-index: 1002;
bottom: 20px;
font-weight: bold;
display: none;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-o-user-select: none;
}
#contact-box2{
width: 100%;
height: 100%;
position: absolute;
left:0;
top:0;
padding-right: 0;
background-color: white;
word-wrap: break-word;
display: none;
}
#contact-text2{
text-align: center;
display: none;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-o-user-select: none;
}
/* End of Contact CSS --------------------------------------------------------------------------------------- */
#press-popup{
width: 100%;
height: 100%;
position:absolute;
top:0;
left:0;
z-index: 102;
background: hsla(0,0%,97%,.7);
display: none;
}
#x-div3{
width: 70px;
height: 40px;
border-radius: 100%;
background: #1e1e1e;
opacity: 0.3;
border-radius: 0 25px 25px 0;
position: relative;
left:0px;
top:1%;
z-index: 1000;
cursor: pointer;
display: none;
}
#x-div3:hover{
background-color: rgb(218, 85, 47);
}
#xicon3{
color: white;
font-size: 1.2em;
position: relative;
top:10px;
left: 0;
z-index: 1002;
bottom: 20px;
font-weight: bold;
display: none;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-o-user-select: none;
}
#press-box3{
width: 100%;
height: 100%;
position: absolute;
left:0;
top:0;
padding-right: 0;
background-color: white;
word-wrap: break-word;
display: none;
}
#press-text3{
text-align: center;
display: none;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-o-user-select: none;
}
/* End of Legal CSS --------------------------------------------------------------------------------------- */
#legal-popup{
width: 100%;
height: 100%;
position:absolute;
top:0;
left:0;
z-index: 102;
background: hsla(0,0%,97%,.7);
display: none;
}
#x-div4{
width: 70px;
height: 40px;
border-radius: 100%;
background: #1e1e1e;
opacity: 0.3;
border-radius: 0 25px 25px 0;
position: relative;
left:0px;
top:1%;
z-index: 1000;
cursor: pointer;
display: none;
}
#x-div4:hover{
background-color: rgb(218, 85, 47);
}
#xicon4{
color: white;
font-size: 1.2em;
position: relative;
top:10px;
left: 0;
z-index: 1002;
bottom: 20px;
font-weight: bold;
display: none;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-o-user-select: none;
}
#legal-box4{
width: 100%;
height: 100%;
position: absolute;
left:0;
top:0;
padding-right: 0;
background-color: white;
word-wrap: break-word;
display: none;
}
#legal-text4{
text-align: center;
display: none;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-o-user-select: none;
}
/* End of Legal CSS --------------------------------------------------------------------------------------- */
#support-popup{
width: 100%;
height: 100%;
position:absolute;
top:0;
left:0;
z-index: 102;
background: hsla(0,0%,97%,.7);
display: none;
}
#x-div5{
width: 70px;
height: 40px;
border-radius: 100%;
background: #1e1e1e;
opacity: 0.3;
border-radius: 0 25px 25px 0;
position: relative;
left:0px;
top:1%;
z-index: 1000;
cursor: pointer;
display: none;
}
#x-div5:hover{
background-color: rgb(218, 85, 47);
}
#xicon5{
color: white;
font-size: 1.2em;
position: relative;
top:10px;
left: 0;
z-index: 1002;
bottom: 20px;
font-weight: bold;
display: none;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-o-user-select: none;
}
#support-box5{
width: 100%;
height: 100%;
position: absolute;
left:0;
top:0;
padding-right: 0;
background-color: white;
word-wrap: break-word;
display: none;
}
#support-text5{
text-align: center;
display: none;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-o-user-select: none;
}
}
CSS WHEN VERTICAL
@media screen and (max-width: 375px) {
#burger-nav{
display: block;
width: 100%;
height: 40px;
background: url(burgerlogo.png) no-repeat 98% center;
background-size: 30px 30px;
background-color: white;
}
#burger-nav.show{
background-color: #f97072;
}
#nav-menu{
background-color: white;
margin: 0;
padding:0;
width: 100%;
height:auto;
overflow: hidden;
display: none;
}
#nav-menu.open{
display: block;
z-index: 100;
position: absolute;
}
#nav-menu li{
float: none;
padding: 10px;
position: relative;
text-align: right;
top:0;
left:0;
cursor: pointer;
border-bottom: 0.1px solid #f8f9fb;
display: block;
font-weight: bold;
}
#nav-menu li:hover {
background-color: #f8f9fb;
}
#name-div{
position: absolute;
top: 30%;
left: 0%;
z-index: 10;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-o-user-select: none;
}
#name{
font-size: 4em;
}
#name.show{
position: relative;
bottom: 40px;
}
.bubbles li:nth-child(1) {
top:100px;
left: 300px;
}
.bubbles li:nth-child(2) {
left: 100px;
top:400px;
}
.bubbles li:nth-child(3) {
left: 200px;
top:0px;
}
.bubbles li:nth-child(4) {
left: 150px;
top:200px;
}
.bubbles li:nth-child(5) {
left: 250px;
top:200px;
}
.bubbles li:nth-child(6) {
left: 250px;
top:200px;
}
#job-popup{
width: 100%;
height: 100%;
position:absolute;
top:0;
left:0;
z-index: 102;
background: hsla(0,0%,97%,.7);
display: none;
}
#x-div1{
width: 70px;
height: 40px;
border-radius: 100%;
background: #1e1e1e;
opacity: 0.3;
border-radius: 0 25px 25px 0;
position: relative;
left:0px;
top:1%;
z-index: 1000;
cursor: pointer;
display: none;
}
#x-div1:hover{
background-color: rgb(218, 85, 47);
}
#xicon1{
color: white;
font-size: 1.2em;
position: relative;
top:10px;
left: 0;
z-index: 1002;
bottom: 20px;
font-weight: bold;
display: none;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-o-user-select: none;
}
#job-box1{
width: 100%;
height: 100%;
position: absolute;
left:0;
top:0;
padding-right: 0;
background-color: white;
word-wrap: break-word;
display: none;
}
#job-text1{
text-align: center;
display: none;
position: relative;
top:6%;
left:0;
font-size: 1.2em;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-o-user-select: none;
}
/* End of Job CSS --------------------------------------------------------------------------------------- */
#contact-popup{
width: 100%;
height: 100%;
position:absolute;
top:0;
left:0;
z-index: 102;
background: hsla(0,0%,97%,.7);
display: none;
}
#x-div2{
width: 70px;
height: 40px;
border-radius: 100%;
background: #1e1e1e;
opacity: 0.3;
border-radius: 0 25px 25px 0;
position: relative;
left:0px;
top:1%;
z-index: 1000;
cursor: pointer;
display: none;
}
#x-div2:hover{
background-color: rgb(218, 85, 47);
}
#xicon2{
color: white;
font-size: 1.2em;
position: relative;
top:10px;
left: 0;
z-index: 1002;
bottom: 20px;
font-weight: bold;
display: none;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-o-user-select: none;
}
#contact-box2{
width: 100%;
height: 100%;
position: absolute;
left:0;
top:0;
padding-right: 0;
background-color: white;
word-wrap: break-word;
display: none;
}
#contact-text2{
text-align: center;
display: none;
position: relative;
top:6%;
left:0;
font-size: 1.2em;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-o-user-select: none;
}
/* End of Contact CSS --------------------------------------------------------------------------------------- */
#press-popup{
width: 100%;
height: 100%;
position:absolute;
top:0;
left:0;
z-index: 102;
background: hsla(0,0%,97%,.7);
display: none;
}
#x-div3{
width: 70px;
height: 40px;
border-radius: 100%;
background: #1e1e1e;
opacity: 0.3;
border-radius: 0 25px 25px 0;
position: relative;
left:0px;
top:1%;
z-index: 1000;
cursor: pointer;
display: none;
}
#x-div3:hover{
background-color: rgb(218, 85, 47);
}
#xicon3{
color: white;
font-size: 1.2em;
position: relative;
top:10px;
left: 0;
z-index: 1002;
bottom: 20px;
font-weight: bold;
display: none;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-o-user-select: none;
}
#press-box3{
width: 100%;
height: 100%;
position: absolute;
left:0;
top:0;
padding-right: 0;
background-color: white;
word-wrap: break-word;
display: none;
}
#press-text3{
text-align: center;
display: none;
position: relative;
top:6%;
left:0;
font-size: 1.2em;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-o-user-select: none;
}
/* End of Legal CSS --------------------------------------------------------------------------------------- */
#legal-popup{
width: 100%;
height: 100%;
position:absolute;
top:0;
left:0;
z-index: 102;
background: hsla(0,0%,97%,.7);
display: none;
}
#x-div4{
width: 70px;
height: 40px;
border-radius: 100%;
background: #1e1e1e;
opacity: 0.3;
border-radius: 0 25px 25px 0;
position: relative;
left:0px;
top:1%;
z-index: 1000;
cursor: pointer;
display: none;
}
#x-div4:hover{
background-color: rgb(218, 85, 47);
}
#xicon4{
color: white;
font-size: 1.2em;
position: relative;
top:10px;
left: 0;
z-index: 1002;
bottom: 20px;
font-weight: bold;
display: none;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-o-user-select: none;
}
#legal-box4{
width: 100%;
height: 100%;
position: absolute;
left:0;
top:0;
padding-right: 0;
background-color: white;
word-wrap: break-word;
display: none;
}
#legal-text4{
text-align: center;
display: none;
position: relative;
top:6%;
left:0;
font-size: 1.2em;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-o-user-select: none;
}
/* End of Legal CSS --------------------------------------------------------------------------------------- */
#support-popup{
width: 100%;
height: 100%;
position:absolute;
top:0;
left:0;
z-index: 102;
background: hsla(0,0%,97%,.7);
display: none;
}
#x-div5{
width: 70px;
height: 40px;
border-radius: 100%;
background: #1e1e1e;
opacity: 0.3;
border-radius: 0 25px 25px 0;
position: relative;
left:0px;
top:1%;
z-index: 1000;
cursor: pointer;
display: none;
}
#x-div5:hover{
background-color: rgb(218, 85, 47);
}
#xicon5{
color: white;
font-size: 1.2em;
position: relative;
top:10px;
left: 0;
z-index: 1002;
bottom: 20px;
font-weight: bold;
display: none;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-o-user-select: none;
}
#support-box5{
width: 100%;
height: 100%;
position: absolute;
left:0;
top:0;
padding-right: 0;
background-color: white;
word-wrap: break-word;
display: none;
}
#support-text5{
text-align: center;
display: none;
position: relative;
top:6%;
left:0;
font-size: 1.2em;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-o-user-select: none;
}
}
1 Answer
Reset to default 4You can use the vh and vw units to do this. These units will size the content in relation to the size of the viewport. For example:
div {
width: 100vw;
height: 100vh;
}
If the vh and vw fields are not supported on the browser your working with, you will need to do it in javascript:
$(document).ready(function(){
resizeDiv();
});
window.onresize = function(event) {
resizeDiv();
}
function resizeDiv() {
vpw = $(window).width();
vph = $(window).height();
$(‘#somediv’).css({‘height’: vph + ‘px’});
}
*You can check browser support here.