Develop Reference

How can I scale my image down with the size of the screen in html/css, or is scaling even the issue?

I have done this many times before, but I cannot seem to find the issue. The page is fine at a certain size, but once I start testing it out and scaling down to around 1260px width, the image starts to overflow and white space is created. I removed one of the column divs so the image was moved, and I could scale smaller before the white started to do this, but then part of my footer did the same thing. I know this likely has something to do with the #media queries, but things just got a little messy along the way and I had to take a break from the project. Can anybody point out what is going on?
Thanks.
Here is an image showing the issue.
Here is an image showing correct scaling and alignment.
I provided as much HTML as I could (the chunk with the image), without going over character limit.
And I have provided my entire CSS file below that.
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, big, cite,
code, del, dfn, em, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, output, ruby,
section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
vertical-align: baseline;
}
article, aside, details, , figure,
footer, header, hgroup, menu, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
body {
-webkit-text-size-adjust: none;
}
mark {
background-color: transparent;
color: inherit;
}
input::-moz-focus-inner {
border: 0;
padding: 0;
}
input, select, textarea {
-moz-appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
appearance: none;
}
/* Basic */
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
background: #fff;
}
body.is-preload *, body.is-preload *:before, body.is-preload *:after {
-moz-animation: none !important;
-webkit-animation: none !important;
-ms-animation: none !important;
animation: none !important;
-moz-transition: none !important;
-webkit-transition: none !important;
-ms-transition: none !important;
transition: none !important;
}
body, input, select, textarea {
color: #666;
font-family: "Source Sans Pro", Helvetica, sans-serif;
font-size: 16pt;
font-weight: 300;
line-height: 1.65em;
}
a {
-moz-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
-webkit-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
-ms-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
border-bottom: -webkit-link;
color: #FFFFFF;
text-decoration: none;
}
a:hover {
border-bottom-color: transparent !important;
color: #FFFFFF;
}
strong, b {
color: #555;
font-weight: 400;
}
em, i {
font-style: italic;
}
p {
margin: 0 0 2em 0;
}
h1, h2, h3, h4, h5, h6 {
color: #fff;
line-height: 1em;
margin: 0 0 1em 0;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
color: inherit;
text-decoration: none;
}
h1 {
font-size: 2.25em;
line-height: 1.35em;
}
h2 {
font-size: 2em;
line-height: 1.35em;
}
h3 {
font-size: 1.35em;
line-height: 1.5em;
}
h4 {
font-size: 1.25em;
line-height: 1.5em;
}
h5 {
font-size: 0.9em;
line-height: 1.5em;
}
h6 {
font-size: 0.7em;
line-height: 1.5em;
}
/* Container */
.container {
margin: 0 auto;
max-width: calc(100% - 4em);
width: 60em;
}
.container.xsmall {
width: 15em;
}
.container.small {
width: 30em;
}
.container.medium {
width: 45em;
}
.container.large {
width: 75em;
}
.container.xlarge {
width: 90em;
}
.container.max {
width: 100%;
}
.address {
color: #2e3842;
position: fixed;
}
.phone {
float: right;
font-size: x-large;
}
#tree-climber {
max-width: 100%;
height: 100%;
display: block;
}
#media screen and (min-width: 980px) {
.container {
max-width: 100% !important;
width: 100% !important;
}
}
#media screen and (max-width: 480px) {
.container {
max-width: calc(100% - 3em);
}
.img {
width: fit-content;
display: block;
}
}
/* Row */
.row {
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
align-items: stretch;
}
.row > * {
box-sizing: border-box;
}
.row > .col-4 {
width: 33.33333%;
}
.row > .col-6 {
width: 100%;
}
.row {
margin-top: 0;
margin-left: -2em;
}
.row > * {
padding: 0 0 0 2em;
}
.row.gtr-uniform {
margin-top: -2em;
}
.row.gtr-uniform > * {
padding-top: 2em;
}
.row.gtr-150 {
margin-top: 0;
margin-left: -3em;
}
.row.gtr-150 > * {
padding: 0 0 0 3em;
}
/* Section/Article */
section.special, article.special {
text-align: center;
}
header p {
color: #999;
margin: 0 0 1.5em 0;
position: relative;
}
header h2 + p {
font-size: 1.25em;
line-height: 1.5em;
margin-top: -1em;
}
header h3 + p {
font-size: 1.1em;
line-height: 1.5em;
margin-top: -0.8em;
}
header h4 + p,
header h5 + p,
header h6 + p {
font-size: 0.9em;
line-height: 1.5em;
margin-top: -0.6em;
}
header.major {
margin: 0 0 1em 0;
}
header.major:after {
background: rgba(144, 144, 144, 0.5);
content: '';
display: inline-block;
height: 1px;
margin-top: 1.5em;
width: 6em;
}
header.major h2, header.major h3, header.major h4, header.major h5, header.major h6 {
margin: 0;
}
/* Image */
.image {
border-radius: 4px;
border: 0;
display: inline-block;
position: relative;
}
.image img {
border-radius: 4px;
display: block;
}
.image.left {
float: left;
padding: 0 1.5em 1em 0;
top: 0.25em;
}
.image.right {
float: right;
padding: 0 0 1em 1.5em;
top: 0.25em;
}
.image.left, .image.right {
max-width: 40%;
}
.image.left img, .image.right img {
width: 100%;
}
.image.fit {
display: block;
margin: 0 0 2em 0;
width: 100%;
}
.image.fit img {
width: 100%;
}
/* List */
ol {
list-style: decimal;
margin: 0 0 2em 0;
padding-left: 1.25em;
}
ol li {
padding-left: 0.25em;
}
ul {
list-style: disc;
margin: 0 0 2em 0;
padding-left: 1em;
}
ul li {
padding-left: 0.5em;
}
ul.alt {
list-style: none;
padding-left: 0;
}
ul.alt li {
border-top: solid 1px rgba(144, 144, 144, 0.5);
padding: 0.5em 0;
}
ul.alt li:first-child {
border-top: 0;
padding-top: 0;
}
dl {
margin: 0 0 2em 0;
}
/* Actions */
ul.actions {
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
cursor: default;
list-style: none;
margin-left: -1em;
padding-left: 0;
}
ul.actions li {
padding: 0 0 0 1em;
vertical-align: middle;
}
ul.actions.special {
-moz-justify-content: center;
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center;
width: 100%;
margin-left: 0;
}
ul.actions.special li:first-child {
padding-left: 0;
}
/* Button */
input[type="submit"],
input[type="reset"],
input[type="button"],
button,
.button {
-moz-appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
appearance: none;
-moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
-webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
-ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
background-color: floralwhite;
border-radius: 4px;
border: 0;
box-shadow: inset 0 0 0 1px rgba(144, 144, 144, 0.5);
color: #555 !important;
cursor: pointer;
display: inline-block;
font-size: 0.9em;
font-weight: 400;
height: 2.75em;
letter-spacing: 0.125em;
line-height: 2.75em;
padding: 0 2em;
text-align: center;
text-decoration: none;
text-indent: 0.125em;
text-transform: uppercase;
white-space: nowrap;
}
input[type="submit"].wide,
input[type="reset"].wide,
input[type="button"].wide,
button.wide,
.button.wide {
min-width: 12em;
}
input[type="submit"].disabled, input[type="submit"]:disabled,
input[type="reset"].disabled,
input[type="reset"]:disabled,
input[type="button"].disabled,
input[type="button"]:disabled,
button.disabled,
button:disabled,
.button.disabled,
.button:disabled {
cursor: default;
opacity: 0.25;
}
/* Main */
.main {
padding: 6em 0 4em 0;
}
.main.style1 {
background: #2e3842;
}
.main.style2 {
background-color: #333;
color: rgba(255, 255, 255, 0.75);
background-attachment: fixed, fixed;
background-size: contain;
}
.main.style2 a {
border-bottom-color: rgba(255, 255, 255, 0.5);
}
.main.style2 a:hover {
color: #ffffff;
}
.main.style2 h1, .main.style2 h2, .main.style2 h3, .main.style2 h4, .main.style2 h5, .main.style2 h6, .main.style2 strong, .main.style2 b {
color: #ffffff;
}
.main.style2 header p {
color: #ffffff;
}
.main.style2 header.major:after {
background: #ffffff;
}
.main.style2 input[type="submit"]:hover,
.main.style2 input[type="reset"]:hover,
.main.style2 input[type="button"]:hover,
.main.style2 button:hover,
.main.style2 .button:hover {
background-color: rgba(255, 255, 255, 0.125);
}
.main.style2 input[type="submit"]:active,
.main.style2 input[type="reset"]:active,
.main.style2 input[type="button"]:active,
.main.style2 button:active,
.main.style2 .button:active {
background-color: rgba(255, 255, 255, 0.25);
}
.main.style2 input[type="submit"].primary,
.main.style2 input[type="reset"].primary,
.main.style2 input[type="button"].primary,
.main.style2 button.primary,
.main.style2 .button.primary {
background-color: #ffffff;
box-shadow: inset 0 0 0 1px #ffffff !important;
color: #333 !important;
}
.main.style2 input[type="submit"].primary:hover,
.main.style2 input[type="reset"].primary:hover,
.main.style2 input[type="button"].primary:hover,
.main.style2 button.primary:hover,
.main.style2 .button.primary:hover {
background-color: rgba(255, 255, 255, 0.125) !important;
color: #ffffff !important;
}
.main.style2 ul.major-icons li .icon {
border-color: #ffffff;
}
.main.style2 .icon.major {
color: #ffffff;
}
/* Header */
#header {
padding: 20em 0 9em 0;
background-color: #4686a0;
color: rgba(255, 255, 255, 0.75);
background-attachment: fixed, fixed, fixed;
background-image: url('/static/images/tree-stump-pile.webp');
background-position: top left, center center, center center;
background-size: auto, cover, cover;
overflow: hidden;
position: relative;
text-align: center;
}
#header a {
border-bottom-color: rgba(255, 255, 255, 0.5);
color: inherit;
}
#header a:hover {
color: #ffffff;
}
#header h1, #header h2, #header h3, #header h4, #header h5, #header h6, #header strong, #header b {
color: #ffffff;
}
#header header p {
color: #ffffff;
}
#header header.major:after {
background: #ffffff;
}
#header h1 {
margin: 0;
}
#header p {
margin: 1em 0 0 0;
}
#header .actions {
-moz-justify-content: center;
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center;
margin-top: 2.5em;
margin-left: 0;
position: relative;
}
#header .actions li:first-child {
padding-left: 0;
}
#header .actions:after {
background: #ffffff;
content: '';
height: 100vh;
left: 50%;
position: absolute;
top: 100%;
width: 1px;
}
#header .inner {
-moz-transition: -moz-transform 1.5s ease, opacity 2s ease;
-webkit-transition: -webkit-transform 1.5s ease, opacity 2s ease;
-ms-transition: -ms-transform 1.5s ease, opacity 2s ease;
transition: transform 1.5s ease, opacity 2s ease;
-moz-transition-delay: 0.25s;
-webkit-transition-delay: 0.25s;
-ms-transition-delay: 0.25s;
transition-delay: 0.25s;
-moz-transform: scale(1);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
position: relative;
z-index: 1;
}
#header .inner .actions {
-moz-transition: -moz-transform 1.25s ease;
-webkit-transition: -webkit-transform 1.25s ease;
-ms-transition: -ms-transform 1.25s ease;
transition: transform 1.25s ease;
-moz-transition-delay: 1s;
-webkit-transition-delay: 1s;
-ms-transition-delay: 1s;
transition-delay: 1s;
-moz-transform: translateY(0);
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
#header:after {
-moz-transition: opacity 1s ease;
-webkit-transition: opacity 1s ease;
-ms-transition: opacity 1s ease;
transition: opacity 1s ease;
content: '';
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
width: 100%;
}
body.is-preload #header .inner {
-moz-transform: scale(1.05);
-webkit-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
opacity: 0;
}
body.is-preload #header .inner .actions {
-moz-transform: translateY(30em);
-webkit-transform: translateY(30em);
-ms-transform: translateY(30em);
transform: translateY(30em);
opacity: 0;
}
body.is-preload #header:after {
opacity: 1;
}
/*Logo*/
#logo {
position: fixed;
top: 0;
left: 0;
opacity: 0.5;
z-index: 0;
}
/* Navbar */
.content {
width: 94%;
margin: 4em auto;
font-size: 20px;
line-height: 30px;
text-align: justify;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #fff;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0.2);
overflow: hidden;
color: #ffffff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #000;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
opacity: 0.6;
}
/* Footer */
.site-footer
{
background-color:#26272b;
padding:45px 0 20px;
font-size:15px;
line-height:24px;
color:#737373;
}
.site-footer hr
{
border-top-color:#bbb;
opacity:0.5
}
.site-footer hr.small
{
margin:20px 0
}
.site-footer h6
{
color:#fff;
font-size:16px;
text-transform:uppercase;
margin-top:5px;
letter-spacing:2px
}
.site-footer a
{
color:#737373;
}
.site-footer a:hover
{
color:#3366cc;
text-decoration:none;
}
.footer-links
{
padding-left:0;
list-style:none
}
.footer-links li
{
display:block
}
.footer-links a
{
color:#737373
}
.footer-links a:active,.footer-links a:focus,.footer-links a:hover
{
color:#3366cc;
text-decoration:none;
}
.footer-links.inline li
{
display:inline-block
}
.site-footer .social-icons
{
text-align:right
}
.site-footer .social-icons a
{
width:40px;
height:40px;
line-height:40px;
margin-left:6px;
margin-right:0;
border-radius:100%;
background-color:#33353d
}
.copyright-text
{
margin:0
}
#media (max-width:991px)
{
.site-footer [class^=col-]
{
margin-bottom:30px
}
}
#media (max-width:767px)
{
.site-footer
{
padding-bottom:0
}
.site-footer .copyright-text,.site-footer .social-icons
{
text-align:center
}
}
.social-icons
{
padding-left:0;
margin-bottom:0;
list-style:none
}
.social-icons li
{
display:inline-block;
margin-bottom:4px
}
.social-icons li.title
{
margin-right:15px;
text-transform:uppercase;
color:#96a2b2;
font-weight:700;
font-size:13px
}
.social-icons a{
background-color:#eceeef;
color:#818a91;
font-size:16px;
display:inline-block;
line-height:44px;
width:44px;
height:44px;
text-align:center;
margin-right:8px;
border-radius:100%;
-webkit-transition:all .2s linear;
-o-transition:all .2s linear;
transition:all .2s linear
}
/* XLarge */
#media screen and (max-width: 1680px) {
/* Basic */
body, input, select, textarea {
font-size: 14pt;
}
/* Header */
#header {
padding: 6em 0 6em 0;
}
}
<!-- Two -->
<section id="two" class="main style2">
<div class="container">
<div class="row gtr-150">
<div class="col-6 col-12-medium">
<header class="major">
<h2>Lorem ipsum dolor adipiscing<br/>
amet dolor consequat</h2>
</header>
<p>Adipiscing a commodo ante nunc accumsan interdum mi ante adipiscing. A nunc lobortis non nisl
amet
vis volutpat aclacus nascetur ac non. Lorem curae eu ante amet sapien in tempus ac.
Adipiscing
id
accumsan adipiscing ipsum.</p>
</div>
<div class="col-6 col-12-medium imp-medium">
<img class="tree-climber" src="{% static 'images/PNW-diagonal-tree-climber.webp' %}"
alt="Image of tree climber">
</img>
</div>
</div>
</div>
</section>

I think this can help you:
On the code bellow you selected the image using the id selector:
#tree-climber {
max-width: 100%;
height: 100%;
display: block;
}
But here you defined as a class:
<img class="tree-climber" src="{% static 'images/PNW-diagonal-tree-climber.webp' %}" alt="Image of tree climber">
</img>
Because of this your styling is not working.
You just have to use the class selector:
.tree-climber {
max-width: 100%;
height: 100%;
display: block;
}

Navigation submenu is coming down with scroll

I have made this navigation, everything works well. However, while I was testing I realised that if you hover on the first nav and scroll down, you will see that the submenu is coming with the mouse as well. How can I avoid it?
Note: Run it in full (desktop) screen size.
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
$('#nav-icon3').toggleClass('open');
} else {
x.className = "topnav";
$('#nav-icon3').toggleClass('open');
}
}
$(".dropbtn").bind("click", function() {
if ($(window).width() < 1150) {
$(this).next().toggle();
}
});
.border-bottom {
width: 100vw;
border-bottom: 3px solid #eee;
bottom: -11px;
z-index: 100;
padding: 0 !important;
position: absolute;
}
.logo {
float: left;
}
.logo img {
width: 290px;
}
.custom-navi {
margin: 0;
padding: 0 55px;
}
.topnav {
overflow: hidden;
float: right;
}
.dropbtn i {
font-size: 27px;
font-weight: bold;
top: 2px;
position: relative;
}
.topnav a {
float: left;
display: block;
color: #009fda;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
font-weight: bold;
}
.topnav .icon {
display: none;
padding-top: 5px;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 20px;
border: none;
font-weight: bold;
background-color: white;
outline: none;
color: #009fda;
padding: 14px 22px;
font-family: inherit;
margin: 0;
}
#media only screen and (min-width:1300px) and (max-width:1600px) {
.custom-navi {
padding: 0 1.5% 0 1.7%;
}
}
#media only screen and (min-width:1150px) and (max-width:1300px) {
.topnav {
float: left;
width: 100%;
}
.dropdown .dropbtn:nth-child(1) {
padding-left: 0px;
}
}
#media screen and (max-width: 1150px) {
.dropdown-content {
display: none;
position: fixed;
min-width: 160px;
padding-top: 18px;
padding-bottom: 18px;
z-index: 999;
background-color: white;
}
}
.dropdown-content a {
float: none;
color: #009fda;
padding: 8px 24px;
text-decoration: none;
display: block;
text-align: left;
font-weight: normal;
}
.topnav a:hover,
.dropdown:hover .dropbtn {
color: #002776;
}
#media screen and (max-width: 1150px) {
.dropdown:hover .dropdown-content {
display: block;
}
}
#media screen and (min-width: 1150px) {
.dropdown-content {
visibility: hidden;
opacity: 0;
position: fixed;
min-width: 160px;
padding-top: 18px;
padding-bottom: 18px;
z-index: 999;
background-color: white;
}
.dropdown:hover .dropdown-content {
visibility: visible;
opacity: 1;
-moz-transition: opacity 300ms ease-in, visibility 300s ease-in;
-o-transition: opacity 300ms ease-in, visibility 300s ease-in;
-webkit-transition: opacity 300ms ease-in, visibility 300s ease-in;
transition: opacity 300ms ease-in, visibility 300s ease-in;
}
}
#media screen and (max-width: 1150px) {
.topnav a,
.dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 1150px) {
.logo img {
padding-left: 11px;
}
.custom-navi {
margin: 0;
padding: 0px;
}
.topnav.responsive {
position: relative;
width: 100%;
margin-top: 15px;
}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {
float: none;
}
.topnav.responsive .dropdown-content {
position: relative;
padding-left: 10px;
padding-top: 0px;
}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
padding: 14px 16px;
}
}
.active {
color: #002776 !important;
}
#nav-icon3 {
width: 40px;
height: 40px;
top: 7px;
position: relative;
margin: 0px auto;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
#nav-icon3 span {
display: block;
position: absolute;
height: 5px;
width: 100%;
background: #009fda;
border-radius: 5px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
/* Icon 3 */
#nav-icon3 span:nth-child(1) {
top: 0px;
}
#nav-icon3 span:nth-child(2),
#nav-icon3 span:nth-child(3) {
top: 12px;
}
#nav-icon3 span:nth-child(4) {
top: 24px;
}
#nav-icon3.open span:nth-child(1) {
top: 12px;
width: 0%;
left: 50%;
}
#nav-icon3.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav-icon3.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav-icon3.open span:nth-child(4) {
top: 12px;
width: 0%;
left: 50%;
}
.main {
background-color: #eee;
width: 100vw;
height: 100vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<section class="custom-navi">
<div class="logo">
LOGO
</div>
<div class="topnav" id="myTopnav">
<!-- Navigation element mit subnavi-->
<div class="dropdown">
<button class="dropbtn">Statements of work <i class="fa fa-angle-down"></i>
</button>
<div class="dropdown-content">
<!-- Subnavi Elements-->
<a>Contact persons</a>
<a>Contact persons</a>
<a>Contact persons</a>
<a>Contact persons</a>
</div>
</div>
<!-- Navigation element mit subnavi-->
<div class="dropdown">
<button class="dropbtn">IT
</button>
<!-- Subnavi Elements-->
</div>
<a href="javascript:void(0);" style="" class="icon" onclick="myFunction()">
<div id="nav-icon3">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</a>
</div>
</section>
<br><br><br><br>
<div class="main">
Page Body
</div>

Use position: absolute instead of position: fixed:
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
$('#nav-icon3').toggleClass('open');
} else {
x.className = "topnav";
$('#nav-icon3').toggleClass('open');
}
}
$(".dropbtn").bind("click", function() {
if ($(window).width() < 1150) {
$(this).next().toggle();
}
});
.border-bottom {
width: 100vw;
border-bottom: 3px solid #eee;
bottom: -11px;
z-index: 100;
padding: 0 !important;
position: absolute;
}
.logo {
float: left;
}
.logo img {
width: 290px;
}
.custom-navi {
margin: 0;
padding: 0 55px;
}
.topnav {
overflow: hidden;
float: right;
}
.dropbtn i {
font-size: 27px;
font-weight: bold;
top: 2px;
position: relative;
}
.topnav a {
float: left;
display: block;
color: #009fda;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
font-weight: bold;
}
.topnav .icon {
display: none;
padding-top: 5px;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 20px;
border: none;
font-weight: bold;
background-color: white;
outline: none;
color: #009fda;
padding: 14px 22px;
font-family: inherit;
margin: 0;
}
#media only screen and (min-width:1300px) and (max-width:1600px) {
.custom-navi {
padding: 0 1.5% 0 1.7%;
}
}
#media only screen and (min-width:1150px) and (max-width:1300px) {
.topnav {
float: left;
width: 100%;
}
.dropdown .dropbtn:nth-child(1) {
padding-left: 0px;
}
}
#media screen and (max-width: 1150px) {
.dropdown-content {
display: none;
position: fixed;
min-width: 160px;
padding-top: 18px;
padding-bottom: 18px;
z-index: 999;
background-color: white;
}
}
.dropdown-content a {
float: none;
color: #009fda;
padding: 8px 24px;
text-decoration: none;
display: block;
text-align: left;
font-weight: normal;
}
.topnav a:hover,
.dropdown:hover .dropbtn {
color: #002776;
}
#media screen and (max-width: 1150px) {
.dropdown:hover .dropdown-content {
display: block;
}
}
#media screen and (min-width: 1150px) {
.dropdown-content {
visibility: hidden;
opacity: 0;
position: absolute;
min-width: 160px;
padding-top: 18px;
padding-bottom: 18px;
z-index: 999;
background-color: white;
}
.dropdown:hover .dropdown-content {
visibility: visible;
opacity: 1;
-moz-transition: opacity 300ms ease-in, visibility 300s ease-in;
-o-transition: opacity 300ms ease-in, visibility 300s ease-in;
-webkit-transition: opacity 300ms ease-in, visibility 300s ease-in;
transition: opacity 300ms ease-in, visibility 300s ease-in;
}
}
#media screen and (max-width: 1150px) {
.topnav a,
.dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 1150px) {
.logo img {
padding-left: 11px;
}
.custom-navi {
margin: 0;
padding: 0px;
}
.topnav.responsive {
position: relative;
width: 100%;
margin-top: 15px;
}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {
float: none;
}
.topnav.responsive .dropdown-content {
position: relative;
padding-left: 10px;
padding-top: 0px;
}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
padding: 14px 16px;
}
}
.active {
color: #002776 !important;
}
#nav-icon3 {
width: 40px;
height: 40px;
top: 7px;
position: relative;
margin: 0px auto;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
#nav-icon3 span {
display: block;
position: absolute;
height: 5px;
width: 100%;
background: #009fda;
border-radius: 5px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
/* Icon 3 */
#nav-icon3 span:nth-child(1) {
top: 0px;
}
#nav-icon3 span:nth-child(2),
#nav-icon3 span:nth-child(3) {
top: 12px;
}
#nav-icon3 span:nth-child(4) {
top: 24px;
}
#nav-icon3.open span:nth-child(1) {
top: 12px;
width: 0%;
left: 50%;
}
#nav-icon3.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav-icon3.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav-icon3.open span:nth-child(4) {
top: 12px;
width: 0%;
left: 50%;
}
.main {
background-color: #eee;
width: 100vw;
height: 100vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<section class="custom-navi">
<div class="logo">
LOGO
</div>
<div class="topnav" id="myTopnav">
<!-- Navigation element mit subnavi-->
<div class="dropdown">
<button class="dropbtn">Statements of work <i class="fa fa-angle-down"></i>
</button>
<div class="dropdown-content">
<!-- Subnavi Elements-->
<a>Contact persons</a>
<a>Contact persons</a>
<a>Contact persons</a>
<a>Contact persons</a>
</div>
</div>
<!-- Navigation element mit subnavi-->
<div class="dropdown">
<button class="dropbtn">IT
</button>
<!-- Subnavi Elements-->
</div>
<a href="javascript:void(0);" style="" class="icon" onclick="myFunction()">
<div id="nav-icon3">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</a>
</div>
</section>
<br><br><br><br>
<div class="main">
Page Body
</div>

don't use position fixed if you dont want the element to stick to screen. use relative.
#media screen and (min-width: 1150px)
.dropdown-content {
visibility: hidden;
opacity: 0;
position: relative;
min-width: 160px;
padding-top: 18px;
padding-bottom: 18px;
z-index: 999;
background-color: white;
}
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
$('#nav-icon3').toggleClass('open');
} else {
x.className = "topnav";
$('#nav-icon3').toggleClass('open');
}
}
$(".dropbtn").bind( "click", function() {
if ($(window).width() < 1150) {
$(this).next().toggle();
}
});
.border-bottom{
width: 100vw;
border-bottom: 3px solid #eee;
bottom: -11px;
z-index: 100;
padding: 0 !important;
position: absolute;
}
.logo{
float:left;
}
.logo img{
width:290px;
}
.custom-navi{
margin:0;
padding: 0 55px;
}
.topnav {
overflow: hidden;
float: right;
}
.dropbtn i {
font-size: 27px;
font-weight: bold;
top: 2px;
position: relative;
}
.topnav a {
float: left;
display: block;
color: #009fda;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
font-weight:bold;
}
.topnav .icon {
display: none;
padding-top:5px;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 20px;
border: none;
font-weight: bold;
background-color:white;
outline: none;
color: #009fda;
padding: 14px 22px;
font-family: inherit;
margin: 0;
}
#media only screen and (min-width:1300px) and (max-width:1600px) {
.custom-navi{
padding: 0 1.5% 0 1.7%;
}
}
#media only screen and (min-width:1150px) and (max-width:1300px) {
.topnav {
float: left;
width: 100%;
}
.dropdown .dropbtn:nth-child(1) {
padding-left: 0px;
}
}
#media screen and (max-width: 1150px) {
.dropdown-content {
display:none;
position: relative;
min-width: 160px;
padding-top:18px;
padding-bottom: 18px;
z-index:999;
background-color:white;
}
}
.dropdown-content a {
float: none;
color: #009fda;
padding: 8px 24px;
text-decoration: none;
display: block;
text-align: left;
font-weight:normal;
}
.topnav a:hover, .dropdown:hover .dropbtn {
color: #002776;
}
#media screen and (max-width: 1150px) {
.dropdown:hover .dropdown-content {
display:block;
}
}
#media screen and (min-width: 1150px) {
.dropdown-content {
visibility: hidden;
opacity:0;
position: relative;
min-width: 160px;
padding-top:18px;
padding-bottom: 18px;
z-index:999;
background-color:white;
}
.dropdown:hover .dropdown-content {
visibility:visible;
opacity:1;
-moz-transition: opacity 300ms ease-in, visibility 300s ease-in;
-o-transition: opacity 300ms ease-in, visibility 300s ease-in;
-webkit-transition: opacity 300ms ease-in, visibility 300s ease-in;
transition: opacity 300ms ease-in, visibility 300s ease-in;
}
}
#media screen and (max-width: 1150px) {
.topnav a, .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 1150px) {
.logo img{
padding-left:11px;
}
.custom-navi{
margin:0;
padding: 0px;
}
.topnav.responsive {position: relative; width:100%; margin-top:15px;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;padding-left:10px;padding-top:0px;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
padding: 14px 16px;
}
}
.active{
color:#002776 !important;
}
#nav-icon3 {
width: 40px;
height: 40px;
top: 7px;
position: relative;
margin: 0px auto;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
#nav-icon3 span {
display: block;
position: absolute;
height: 5px;
width: 100%;
background: #009fda;
border-radius: 5px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
/* Icon 3 */
#nav-icon3 span:nth-child(1) {
top: 0px;
}
#nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) {
top: 12px;
}
#nav-icon3 span:nth-child(4) {
top: 24px;
}
#nav-icon3.open span:nth-child(1) {
top: 12px;
width: 0%;
left: 50%;
}
#nav-icon3.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav-icon3.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav-icon3.open span:nth-child(4) {
top: 12px;
width: 0%;
left: 50%;
}
.main{background-color:#eee;
width:100vw;
height:100vh;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<section class="custom-navi">
<div class="logo">
LOGO
</div>
<div class="topnav" id="myTopnav">
<!-- Navigation element mit subnavi-->
<div class="dropdown">
<button class="dropbtn">Statements of work <i class="fa fa-angle-down"></i>
</button>
<div class="dropdown-content">
<!-- Subnavi Elements-->
<a >Contact persons</a>
<a >Contact persons</a>
<a >Contact persons</a>
<a >Contact persons</a>
</div>
</div>
<!-- Navigation element mit subnavi-->
<div class="dropdown">
<button class="dropbtn">IT
</button>
<!-- Subnavi Elements-->
</div>
<a href="javascript:void(0);" style="" class="icon" onclick="myFunction()">
<div id="nav-icon3">
<span></span>
<span></span>
<span></span>
<span></span>
</div></a>
</div>
</section>
<br><br><br><br>
<div class="main">
Page Body
</div>

How can I add hamburger to my website's mobile view

I have to add a hamburger for mobile view of my website coding.
I tried with the help of w3 school but it's not working fine.
I will share my html and css code. I have added a hamburger icon just have to make it active.
Should I write code in separate JavaScript file or add any code here in my HTML?
I have tried adding hamburger from HTML CSS properties
HTML and CSS for the mobile view header:
.mobheader {
width: 80%;
height: auto;
margin: 0px auto;
display: flex;
align-items: center;
justify-content: space-between;
}
.hamburger {
font-size: 33px;
color: white;
float: left;
margin-top: 20px;
margin-bottom: 20px;
}
<div class="mobheader">
<div class="hamburger">
<i class="fas fa-bars"></i>
</div>
<div class="logo">
<h1>
<img src="img/logomob.png" alt="logo">
</h1>
</div>
<div class="dots">
<i class="fas fa-search"></i>
</div>
</div>
I want this hamburger to work in such a way it shows 3 menus on click

I can't comment, I'm not understanding what's your problem because the code you already posted works, I just changed the color and the size in the code snippet. See and if your problem is other's just clarify what's your current problem.
EDIT
I find a codepen and added to the snippet to show you what you wanted.
Source: https://codepen.io/mranenko/pen/wevamj
(function() {
var hamburger = {
navToggle: document.querySelector('.nav-toggle'),
nav: document.querySelector('nav'),
doToggle: function(e) {
e.preventDefault();
this.navToggle.classList.toggle('expanded');
this.nav.classList.toggle('expanded');
}
};
hamburger.navToggle.addEventListener('click', function(e) {
hamburger.doToggle(e);
});
}());
/* imports */
#import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro");
/* colors */
/* variables */
/* mixins */
/* resets and base styles */
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
*:focus {
outline: none;
}
html {
background: #5634d1;
color: white;
font: normal 10px/1.42857 "Source Sans Pro", Helvetica, Arial, sans-serif;
}
body {
background: none;
color: inherit;
font: inherit;
}
a {
color: inherit;
cursor: pointer;
text-decoration: none;
}
a:hover {
opacity: 0.8;
}
/* nav toggle */
.nav-toggle {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
cursor: pointer;
height: 2rem;
left: 2rem;
position: fixed;
top: 2rem;
width: 3.6rem;
z-index: 2;
}
.nav-toggle:hover {
opacity: 0.8;
}
.nav-toggle .nav-toggle-bar,
.nav-toggle .nav-toggle-bar::after,
.nav-toggle .nav-toggle-bar::before {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
background: white;
content: '';
height: 0.4rem;
width: 100%;
}
.nav-toggle .nav-toggle-bar {
margin-top: 0;
}
.nav-toggle .nav-toggle-bar::after {
margin-top: 0.8rem;
}
.nav-toggle .nav-toggle-bar::before {
margin-top: -0.8rem;
}
.nav-toggle.expanded .nav-toggle-bar {
background: transparent;
}
.nav-toggle.expanded .nav-toggle-bar::after,
.nav-toggle.expanded .nav-toggle-bar::before {
background: white;
margin-top: 0;
}
.nav-toggle.expanded .nav-toggle-bar::after {
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.nav-toggle.expanded .nav-toggle-bar::before {
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/* nav */
.nav {
-webkit-transition: left 0.5s ease;
-moz-transition: left 0.5s ease;
-ms-transition: left 0.5s ease;
-o-transition: left 0.5s ease;
transition: left 0.5s ease;
background: #28dde0;
color: white;
cursor: pointer;
font-size: 2rem;
height: 100vh;
left: -20rem;
padding: 6rem 2rem 2rem 2rem;
position: fixed;
top: 0;
width: 20rem;
z-index: 1;
}
.nav.expanded {
left: 0;
}
.nav ul {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
list-style: none;
margin: 0;
padding: 0;
}
<div class="nav-toggle">
<div class="nav-toggle-bar"></div>
</div>
<nav class="nav">
<ul>
<li>Portfolio</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>

Assuming the hamburger is an image:
<img src="img/hamburger.png" alt="hamburger"/>
You don't need the h1 tags for images, those are for headings (i.e text)
Also remember the "/" to close your img tags; your logo doesn't have one.

Popup position issues

I have a trivia game that has a popup once the question is answered. However, the popup's position is not consistent. I don't know where the problem is. I have been trying many different solutions to no avail.
html:
<div class="logo">
<img src="css/rio-40.png"/>
</div>
<div class="container" id="start">
<div class = "question"></div>
</br>
<ul id="answers">
</br>
</br>
<li class= "answer span" id= "A"></li>
<li class= "answer span" id= "B"></li>
<li class= "answer span" id= "C"></li>
</ul>
</div>
<div class="container2">
<div class="score"></div>
</div>
<div class="container3">
<div class = "right-or-wrong" style = "display:none"></div>
</br>
<div class = "next" style = "display:none">Next question!</div>
<div id="score again"></div>
</div>
<div class="cd-popup" role="alert">
<div class="cd-popup-container">
<p> OH NO! <br /> You got 0 out of 3 correct. <br /> Brush up on your trivia <br /> and play again.</p>
<ul class="cd-buttons">
<li id="reset">Play Again</li>
</ul>
</div>
</div>
<div class="cd-popup1" role="alert">
<div class="cd-popup1-container">
<img src="css/bronze-rio.png" />
<p> You got 1 out of 3 correct. </br>Good job!</p>
<ul class="cd-buttons">
<li id="reset">Play Again</li>
</ul>
</div>
</div>
<div class="cd-popup2" role="alert">
<div class="cd-popup2-container">
<img src="css/silver-rio.png" />
<p>You got 2 out of 3 correct.</br>Awesome job!</p>
<ul class="cd-buttons">
<li id="reset">Play Again</li>
</ul>
</div>
</div>
<div class="cd-popup3" role="alert">
<div class="cd-popup3-container">
<img src="css/gold-rio.png" />
<p>You got 3 out of 3 correct.</br>Perfection!</p>
<ul class="cd-buttons">
<li id="reset">Play Again</li>
</ul>
</div>
</div>
CSS:
#import url(https://fonts.googleapis.com/css?family=Slabo+27px);
body {
/*background: ("css/background.png");*/
background-color: #21509d;
text-align: center;
font-family: 'Slabo 27px', serif;
height: 600px;
}
.logo {
padding-top: 10px;
padding-bottom: 10px;
background-color: #fff;
z-index: 10;
}
h1{
color: #fff;
font-size: 40px;
font-weight: bolder;
}
.question {
font-family: 'Slabo 27px', serif;
padding-top: 50px;
vertical-align: middle;
display: inline-block;
/*height: 60px;*/
width: 75%;
color: #fff;
font-size: 60px;
font-weight: bold;
z-index: 0;
}
#answers{
text-align: center;
display: inline-block;
list-style-type: circle;
}
/*
#answers ul{
text-align: left;
display: inline-block;
list-style-type: none;
}*/
.answer{
text-align: center;
font-family: 'Slabo 27px', serif;
line-height: 60px;
font-size: 50px;
color: #fff;
cursor: pointer;
z-index: 1;
text-align: left;
}
/*span{
text-align: center;
}*/
.score {
padding-top: 40px;
font-family: 'Slabo 27px', serif;
width: 30%;
height:65px;
z-index: 0;
font-size: 60px;
/*font-weight: bold;*/
text-align: center;
display: inline-block;
}
h2{
font-family: 'Slabo 27px', serif;
font-size: 50px;
}
.container3{
text-align: center;
vertical-align: middle;
/*z-index: 10;*/
}
.right-or-wrong {
padding-top: 40px;
vertical-align: middle;
margin-left: 5%;
margin-right: 5%;
text-align: center;
height: 425px;
width: 90%;
font-family: 'Slabo 27px', serif;
background-color: #fff;
color: #21509d;
z-index: 0;
margin-top: -450px;
font-size: 40px;
font-weight: bold;
}
.next {
font-family: 'Slabo 27px', serif;
/*margin-left: 620px;*/
height: 30px;
width: 200px;
background-color: green;
color: #fff;
z-index: 11;
cursor: pointer;
padding-top: 5px;
text-align: center;
border-radius: 20px;
margin-bottom: 100px;
display: inline-block;
font-weight: bold;
}
a{
color: #fff;
text-decoration: none;
cursor: pointer;
}
.container{
/*margin-top: 50px;*/
text-align: center;
vertical-align: middle;
z-index: 0
}
.container2{
text-align: center;
vertical-align: middle;
/*z-index: 10;*/
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, main {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
html * {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.img-replace {
/* replace text with an image */
display: inline-block;
overflow: hidden;
text-indent: 100%;
color: transparent;
white-space: nowrap;
}
.cd-popup-trigger {
display: block;
width: 170px;
height: 50px;
line-height: 50px;
margin: 3em auto;
text-align: center;
color: #FFF;
font-size: 14px;
font-size: 0.875rem;
font-weight: bold;
text-transform: uppercase;
border-radius: 50em;
background: #35a785;
box-shadow: 0 3px 0 rgba(0, 0, 0, 0.07);
}
#media only screen and (min-width: 1170px) {
.cd-popup-trigger {
margin: 6em auto;
}
}
/*popup if score 0*/
.cd-popup {
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: rgba(94, 110, 141, 0.9);
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s;
-moz-transition: opacity 0.3s 0s, visibility 0s 0.3s;
transition: opacity 0.3s 0s, visibility 0s 0.3s;
}
.cd-popup.is-visible {
opacity: 1;
visibility: visible;
-webkit-transition: opacity 0.3s 0s, visibility 0s 0s;
-moz-transition: opacity 0.3s 0s, visibility 0s 0s;
transition: opacity 0.3s 0s, visibility 0s 0s;
}
.cd-popup-container {
font-family: 'Slabo 27px', serif;
font-size: 27px;
position: relative;
width: 100%;
max-width: 400px;
margin: 4em auto;
background: #FFF;
border-radius: .25em .25em .4em .4em;
text-align: center;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
-webkit-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-o-transform: translateY(-40px);
transform: translateY(-40px);
/* Force Hardware Acceleration in WebKit */
-webkit-backface-visibility: hidden;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
z-index: 05;
}
/*score 1*/
.cd-popup1 {
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: rgba(94, 110, 141, 0.9);
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s;
-moz-transition: opacity 0.3s 0s, visibility 0s 0.3s;
transition: opacity 0.3s 0s, visibility 0s 0.3s;
}
.cd-popup1.is-visible {
opacity: 1;
visibility: visible;
-webkit-transition: opacity 0.3s 0s, visibility 0s 0s;
-moz-transition: opacity 0.3s 0s, visibility 0s 0s;
transition: opacity 0.3s 0s, visibility 0s 0s;
}
.cd-popup1-container {
font-family: 'Slabo 27px', serif;
font-size: 27px;
position: relative;
width: 100%;
max-width: 400px;
margin: 4em auto;
background: #FFF;
border-radius: .25em .25em .4em .4em;
text-align: center;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
-webkit-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-o-transform: translateY(-40px);
transform: translateY(-40px);
/* Force Hardware Acceleration in WebKit */
-webkit-backface-visibility: hidden;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
z-index: 05;
}
/*score 2*/
.cd-popup2 {
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: rgba(94, 110, 141, 0.9);
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s;
-moz-transition: opacity 0.3s 0s, visibility 0s 0.3s;
transition: opacity 0.3s 0s, visibility 0s 0.3s;
}
.cd-popup2.is-visible {
opacity: 1;
visibility: visible;
-webkit-transition: opacity 0.3s 0s, visibility 0s 0s;
-moz-transition: opacity 0.3s 0s, visibility 0s 0s;
transition: opacity 0.3s 0s, visibility 0s 0s;
}
.cd-popup2-container {
font-family: 'Slabo 27px', serif;
font-size: 27px;
position: relative;
width: 100%;
max-width: 400px;
margin: 4em auto;
background: #FFF;
border-radius: .25em .25em .4em .4em;
text-align: center;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
-webkit-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-o-transform: translateY(-40px);
transform: translateY(-40px);
/* Force Hardware Acceleration in WebKit */
-webkit-backface-visibility: hidden;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
z-index: 05;
}
/*score 3 */
.cd-popup3 {
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: rgba(94, 110, 141, 0.9);
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s;
-moz-transition: opacity 0.3s 0s, visibility 0s 0.3s;
transition: opacity 0.3s 0s, visibility 0s 0.3s;
}
.cd-popup3.is-visible {
opacity: 1;
visibility: visible;
-webkit-transition: opacity 0.3s 0s, visibility 0s 0s;
-moz-transition: opacity 0.3s 0s, visibility 0s 0s;
transition: opacity 0.3s 0s, visibility 0s 0s;
}
.cd-popup3-container {
font-family: 'Slabo 27px', serif;
font-size: 27px;
position: relative;
width: 100%;
max-width: 400px;
margin: 4em auto;
background: #FFF;
border-radius: .25em .25em .4em .4em;
text-align: center;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
-webkit-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-o-transform: translateY(-40px);
transform: translateY(-40px);
/* Force Hardware Acceleration in WebKit */
-webkit-backface-visibility: hidden;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
z-index: 05;
}
.cd-popup-container p {
font-family: 'Slabo 27px', serif;
font-size: 27px;
padding: 3em 1em;
}
.cd-popup-container .cd-buttons:after {
font-family: 'Slabo 27px', serif;
content: "";
display: table;
clear: both;
}
.cd-popup-container .cd-buttons li {
font-family: 'Slabo 27px', serif;
float: left;
width: 100%;
list-style: none;
background: #F1C203;
border-bottom: .25em;
}
.cd-popup-container .cd-buttons a {
font-family: 'Slabo 27px', serif;
display: block;
height: 60px;
line-height: 60px;
text-transform: uppercase;
color: #000;
-webkit-transition: background-color 0.2s;
-moz-transition: background-color 0.2s;
transition: background-color 0.2s;
}
.cd-popup1-container .cd-buttons:after {
font-family: 'Slabo 27px', serif;
content: "";
display: table;
clear: both;
}
.cd-popup1-container .cd-buttons li {
font-family: 'Slabo 27px', serif;
width: 100%;
list-style: none;
background: #F1C203;
border-bottom: .25em;
}
.cd-popup1-container .cd-buttons a {
font-family: 'Slabo 27px', serif;
display: block;
height: 60px;
line-height: 60px;
text-transform: uppercase;
color: #000;
-webkit-transition: background-color 0.2s;
-moz-transition: background-color 0.2s;
transition: background-color 0.2s;
}
.cd-popup2-container .cd-buttons:after {
content: "";
font-family: 'Slabo 27px', serif;
display: table;
clear: both;
}
.cd-popup2-container .cd-buttons li {
font-family: 'Slabo 27px', serif;
float: left;
width: 100%;
list-style: none;
background: #F1C203;
border-bottom: .25em;
}
.cd-popup2-container .cd-buttons a {
font-family: 'Slabo 27px', serif;
display: block;
height: 60px;
line-height: 60px;
text-transform: uppercase;
color: #000;
-webkit-transition: background-color 0.2s;
-moz-transition: background-color 0.2s;
transition: background-color 0.2s;
}
.cd-popup3-container .cd-buttons:after {
font-family: 'Slabo 27px', serif;
content: "";
display: table;
clear: both;
}
.cd-popup3-container .cd-buttons li {
font-family: 'Slabo 27px', serif;
float: left;
width: 100%;
list-style: none;
background: #F1C203;
border-bottom: .25em;
}
.cd-popup3-container .cd-buttons a {
font-family: 'Slabo 27px', serif;
display: block;
height: 60px;
line-height: 60px;
text-transform: uppercase;
color: #000;
-webkit-transition: background-color 0.2s;
-moz-transition: background-color 0.2s;
transition: background-color 0.2s;
}
.cd-popup-container .cd-buttons li:first-child a {
font-family: 'Slabo 27px', serif;
background: #F1C203;
border-bottom: .25em;
}
.cd-popup1-container .cd-buttons li:first-child a {
font-family: 'Slabo 27px', serif;
background: #F1C203;
border-bottom: .25em;
}
.cd-popup2-container .cd-buttons li:first-child a {
font-family: 'Slabo 27px', serif;
background: #F1C203;
border-bottom: .25em;
}
.cd-popup3-container .cd-buttons li:first-child a {
font-family: 'Slabo 27px', serif;
background: #F1C203;
border-bottom: .25em;
}
.no-touch .cd-popup-container .cd-buttons li:first-child a:hover {
background-color: #F1C203;
}
.cd-popup-container .cd-buttons li:last-child a {
background: #F1C203;
border-bottom: .25em;
}
.no-touch .cd-popup-container .cd-buttons li:last-child a:hover {
background-color: #F1C203;
}
.cd-popup-container .cd-popup-close {
position: absolute;
top: 8px;
right: 8px;
width: 30px;
height: 30px;
}
.cd-popup-container .cd-popup-close::before, .cd-popup-container .cd-popup-close::after {
content: '';
position: absolute;
top: 12px;
width: 14px;
height: 3px;
background-color: #8f9cb5;
}
.cd-popup-container .cd-popup-close::before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
left: 8px;
}
.cd-popup-container .cd-popup-close::after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
right: 8px;
}
.is-visible .cd-popup-container {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
#media only screen and (min-width: 1170px) {
.cd-popup-container {
margin: 8em auto;
}
}
Here is the Codepen here
And the actual Game here

It has to do with the padding and size of the questions and answers. Try making your containers position: absolute; and the parent position: relative; so they will all be positioned in the same place.

My Pop Up Window isn't displaying right

I'm redesigning a website for fun. I have a pop up window that opens up after you click a button. However, the window and button shows up in a weird layout. The button is displayed to the far left and the text is all over the screen. You can actually see the entire code on codepen: http://codepen.io/sibraza/pen/wWgqBO
Here is the HTML:
<!--- This is what the user see when they click the button -->
<span class="msg"><button class="btn btn-danger"data-js="open">Subscribe to our Newsletter</button></span>
</section>
<!-- this is what the user sees when the popup is displayed -->
<div class="popup">
<h2>Subscribe to the Newletter:</h2>
<button name="close">Close Pop-up</button>
</div>
Here is the CSS:
button {
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
background: lightcoral;
border: 0;
border-radius: 4px;
padding: 7px 15px;
font-size: 16px;
color: #FFFFFF;
cursor: pointer;
}
button:focus {
outline: none;
}
button:hover {
background: #f39797;
}
.popup {
background: rgba(255, 255, 255, 0.8);
position: fixed;
display: none;
z-index: 5000;
height: 100%;
width: 100%;
left: 0;
top: 0;
}
.popup > div {
border-radius: 4px;
position: fixed;
background: #FFFFFF;
box-shadow: 0px 0px 12px #666666;
padding: 30px 15px;
/* Width of popup can be changed */
width: 80%;
max-width: 600px;
z-index: 5001;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
text-align: center;
}
Here is the JavaScript:
function popupOpenClose(popup) {
/* Add div inside popup for layout if one doesn't exist */
if ($(".wrapper").length == 0){
$(popup).wrapInner("<div class='wrapper'></div>");
}
/* Open popup */
$(popup).show();
/* Close popup if user clicks on background */
$(popup).click(function(e) {
if ( e.target == this ) {
if ($(popup).is(':visible')) {
$(popup).hide();
}
}
});
/* Close popup and remove errors if user clicks on cancel or close buttons */
$(popup).find("button[name=close]").on("click", function() {
if ($(".formElementError").is(':visible')) {
$(".formElementError").remove();
}
$(popup).hide();
});
}
$(document).ready(function () {
$("[data-js=open]").on("click", function() {
popupOpenClose($(".popup"));
});
});

Try this code, I have added a simple form. You can just change the css of the popup or the form as you need.
function toggleOn(){
$('body, #menu, #navbar, #content').toggleClass('on');
}
$(document).ready(function (){
$('#menu').click(function(){ toggleOn(); });
$('#content').click(function(){
if ($('#navbar').hasClass('on')) toggleOn();
});
});
//this is for the pop up
function popupOpenClose(popup) {
/* Add div inside popup for layout if one doesn't exist */
if ($(".wrapper").length == 0){
$(popup).wrapInner("<div class='wrapper'></div>");
}
/* Open popup */
$(popup).show();
/* Close popup if user clicks on background */
$(popup).click(function(e) {
if ( e.target == this ) {
if ($(popup).is(':visible')) {
$(popup).hide();
}
}
});
/* Close popup and remove errors if user clicks on cancel or close buttons */
$(popup).find("button[name=close]").on("click", function() {
if ($(".formElementError").is(':visible')) {
$(".formElementError").remove();
}
$(popup).hide();
});
}
$(document).ready(function () {
$("[data-js=open]").on("click", function() {
popupOpenClose($(".popup"));
});
});
//search bar
$(document).on('ready', function(){
var $wrap = $('[js-ui-search]');
var $close = $('[js-ui-close]');
var $input = $('[js-ui-text]');
$close.on('click', function(){
$wrap.toggleClass('open');
});
$input.on('transitionend webkitTransitionEnd oTransitionEnd', function(){
console.log('triggered end animation');
if ($wrap.hasClass('open')) {
$input.focus();
} else {
return;
}
});
});
// pop up window
body {
color: white;
font-family: 'Lato', sans-serif;
font-weight: 400;
font-size: inherit;
background: #000000;
perspective: 600px;
}
body h1, body h2 {
position: absolute;
left: 50%;
transform: translateX(-50%);
color: white;
font-family: 'Lato', sans-serif;
text-transform: uppercase;
letter-spacing: 2px;
}
body h1 {
top: 24px;
font-size: 12px;
color: #cc0000;
margin-top: 200px;
}
body h2 {
font-size: 10px;
opacity: 0.7;
color: #cc0000;
z-index: 1;
}
body .msg {
position: absolute;
display: inline-block;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border-radius: 3px;
padding: 10px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
}
body.on {
overflow: hidden;
}
#menu {
z-index: 100;
position: fixed;
width: 40px;
height: 40px;
top: 50px;
right: 50px;
background: none;
border: none;
border-radius: 5px;
outline: none;
cursor: pointer;
transition: all 0.2s ease-in-out;
transform: rotate(-90deg);
}
#menu:hover {
background: #cc0000;
transition: all 0.2s ease-in-out;
}
#menu #line {
position: absolute;
width: 22px;
height: 2px;
left: 9px;
top: 19px;
background: white;
}
#menu #arrow {
position: absolute;
width: 6px;
height: 6px;
top: 16px;
right: 9px;
border-top: 2px solid white;
border-right: 2px solid white;
transform: rotate(45deg);
}
#menu.on {
transition: all 0.2s ease-in-out;
transform: rotate(90deg);
}
#menu.on:hover {
background: #404040;
transition: all 0.2s ease-in-out;
}
section {
position: relative;
width: 100%;
height: 450px;
padding: 1.5px 2.5px;
background: black;
transition: all 0.3s ease-in-out;
}
section.msg {
position: absolute;
opacity: 0.8;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
section.on {
box-shadow: 0 5px 20px #333333;
border-radius: 6px;
cursor: zoom-out;
transition: all 0.3s ease-in-out;
transform-origin: 50% 0;
transform: scale(0.8) translateY(100vh);
}
#navbar {
margin-top: 60px;
z-index: 90;
position: fixed;
width: 90vw;
height: 70vh;
top: 0;
left: 50%;
opacity: 0;
overflow: hidden;
transition: all 0.3s ease-in-out;
transform-origin: 50% 0;
transform: translateX(-50%) scale(0);
}
#navbar .msg {
background: #404040;
}
#navbar.on {
top: 5vh;
opacity: 1;
transition: all 0.3s ease-in-out;
transform: translateX(-50%) scale(1);
}
/* BASE
================================================================= */
html {
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
}
body {
font-family: 'Lato', sans-serif;
font-size: 18px;
line-height: 2.35;
color: #cc0000;
margin: 0;
}
p {
padding-top: 3em;
max-width: 700px;
margin: 0 auto;
}
/* DYNAMIC NAVIGATION BAR
================================================================= */
nav {
position: fixed;
width: 100%;
top: 0;
background: black;
-webkit-transition: all 650ms cubic-bezier(0.22, 1, 0.25, 1);
transition: all 650ms cubic-bezier(0.22, 1, 0.25, 1);
z-index: 1;
height: 80px;
}
nav:before {
content: "";
display: block;
position: absolute;
background: rgba(0, 0, 0, 0.27);
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
nav ul {
position: relative;
margin: 0;
z-index: 2;
text-transform: uppercase;
text-align: center;
}
nav ul li {
display: inline-block;
padding: 1.35em 0;
margin-right: 3em;
font-size: 0.9em;
}
nav ul li a {
text-decoration: none;
color: #cc0000;
font-size: 0.9em;
}
nav ul li a:hover{
color: white;
}
.edit{
margin-top: 150px;
}
.direct{
margin-top: 250px;
color: white;
}
button {
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
background: lightcoral;
border: 0;
border-radius: 4px;
padding: 7px 15px;
font-size: 16px;
color: #FFFFFF;
cursor: pointer;
}
button:focus {
outline: none;
}
button:hover {
background: #f39797;
}
.popup {
background: rgba(255, 255, 255, 0.8);
position: fixed;
display: none;
z-index: 5000;
height: 100%;
width: 100%;
left: 0;
top: 0;
}
.popup > div {
border-radius: 4px;
position: fixed;
background: #FFFFFF;
box-shadow: 0px 0px 12px #666666;
padding: 30px 15px;
/* Width of popup can be changed */
width: 80%;
max-width: 600px;
z-index: 5001;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
text-align: center;
}
.logo{
float: left;
}
.logos{
margin-top: -9px;
width: 150px;
height: 100%;
}
section.content{
margin-top: 400px;
}
.stuff{
margin-top: 100px;
height: 350px;
width: 100%;
object-fit: cover;
opacity: .4;
}
.products{
margin-left: 560px;
margin-top: 360px;
}
.footy{
color: white;
background: black;
height:140px;
width: 100%;
}
.about_info{
width: 80%;
float: left;
font-size: 14px;
margin-left: 30px;
}
.about_us{
margin-left: 30px;
}
.reach_out{
float: left;
margin-top: -90px;
margin-left: 10px;
}
.account{
margin-left:
}
.follow{
float: right;
margin-right: 30px;
display: inline-block;
}
.product_line{
height: 250px;
width: 100%;
background: white;
}
.protein{
margin-bottom: 25px;
padding-bottom: 20px;
}
.social{
float: right;
margin-top: 30px;
}
form{
width:100%;
text-align:center;
}
input[type="text"] {
-webkit-appearance: none;
outline: none;
border: none;
}
.search-wrap {
position: relative;
display: block;
z-index: 1;
width: 40px;
height: 40px;
margin-left: 0;
padding: 0;
border: 2px solid white;
border-radius: 20px;
-moz-transition: all 0.25s ease 0.3s;
-o-transition: all 0.25s ease 0.3s;
-webkit-transition: all 0.25s ease;
-webkit-transition-delay: 0.3s;
transition: all 0.25s ease 0.3s;
}
.search-wrap:before {
top: 90%;
left: 90%;
width: 16px;
height: 2px;
background-color: white;
border-radius: 1px;
-moz-transition: width 0.15s ease 0.55s;
-o-transition: width 0.15s ease 0.55s;
-webkit-transition: width 0.15s ease;
-webkit-transition-delay: 0.55s;
transition: width 0.15s ease 0.55s;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-moz-transform-origin: top left;
-ms-transform-origin: top left;
-webkit-transform-origin: top left;
transform-origin: top left;
}
.search-wrap input {
width: 100%;
height: 100%;
padding: 0 30px 0 15px;
font-size: 14px;
line-height: 38px;
opacity: 0;
background-color: transparent;
-moz-transition: opacity 0.15s ease;
-o-transition: opacity 0.15s ease;
-webkit-transition: opacity 0.15s ease;
transition: opacity 0.15s ease;
}
.eks {
display: block;
position: absolute;
top: 50%;
right: 0;
z-index: 20;
width: 30px;
height: 30px;
cursor: pointer;
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.eks:before, .eks:after {
right: 5px;
height: 2px;
width: 2px;
border-radius: 1px;
-moz-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.eks:before {
top: 0px;
background-color: white;
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-moz-transform-origin: top right;
-ms-transform-origin: top right;
-webkit-transform-origin: top right;
transform-origin: top right;
-moz-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.eks:after {
bottom: 0px;
background-color: white;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-moz-transform-origin: bottom right;
-ms-transform-origin: bottom right;
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.search-wrap.open {
width: 160px;
-moz-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.search-wrap.open:before {
width: 0px;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.search-wrap.open input {
opacity: 1;
-moz-transition-delay: 0.15s;
-o-transition-delay: 0.15s;
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
}
.search-wrap.open .eks:before, .search-wrap.open .eks:after {
width: 15px;
right: 12px;
}
.search-wrap.open .eks:before {
top: 9px;
-moz-transition-delay: 0.25s;
-o-transition-delay: 0.25s;
-webkit-transition-delay: 0.25s;
transition-delay: 0.25s;
}
.search-wrap.open .eks:after {
bottom: 9px;
-moz-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.search-wrap:before, .eks:before, .eks:after {
content: "";
position: absolute;
display: block;
}
a{
color: white;
}
a:hover{
color: red;
}
.reach_out{
list-style-type: none;
}
.links{
margin-top: 30px;
margin-right: 30px;
list-style-type: none;
}
.icon-button {
background-color: white;
border-radius: 2.6rem;
cursor: pointer;
display: inline-block;
font-size: 1.3rem;
height: 2.6rem;
line-height: 2.6rem;
margin: 0 5px;
position: relative;
text-align: center;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
width: 2.6rem;
}
/* Circle */
.icon-button span {
border-radius: 0;
display: block;
height: 0;
left: 50%;
margin: 0;
position: absolute;
top: 50%;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
width: 0;
}
.icon-button:hover span {
width: 2.6rem;
height: 2.6rem;
border-radius: 2.6rem;
margin: -1.3rem;
}
/* Icons */
.icon-button i {
background: none;
color: white;
height: 2.6rem;
left: 0;
line-height: 2.6rem;
position: absolute;
top: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
width: 2.6rem;
z-index: 10;
}
.twitter span {
background-color: #4099ff;
}
.facebook span {
background-color: #3B5998;
}
.google-plus span {
background-color: #db5a3c;
}
.tumblr span {
background-color: #34526f;
}
.instagram span {
background-color: #517fa4;
}
.youtube span {
background-color: #bb0000;
}
.pinterest span {
background-color: #cb2027;
}
.icon-button .fa-twitter {
color: #4099ff;
}
.icon-button .fa-facebook {
color: #3B5998;
}
.icon-button .fa-tumblr {
color: #34526f;
}
.icon-button .fa-instagram {
color: #517fa4;
}
.icon-button .fa-youtube {
color: #bb0000;
}
.icon-button .fa-pinterest {
color: #cb2027;
}
.icon-button:hover .fa-twitter,
.icon-button:hover .fa-facebook,
.icon-button:hover .icon-google-plus,
.icon-button:hover .fa-tumblr,
.icon-button:hover .fa-instagram,
.icon-button:hover .fa-youtube,
.icon-button:hover .fa-pinterest {
color: white;
}
#media all and (max-width: 680px) {
.icon-button {
border-radius: 1.6rem;
font-size: 0.8rem;
height: 1.6rem;
line-height: 1.6rem;
width: 1.6rem;
}
.icon-button:hover span {
width: 1.6rem;
height: 1.6rem;
border-radius: 1.6rem;
margin: -0.8rem;
}
/* Icons */
.icon-button i {
height: 1.6rem;
line-height: 1.6rem;
width: 1.6rem;
}
body {
padding: 10px;
}
.pinterest {
display: none;
}
}
.wrapper {
max-width: 60rem;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 3rem;
}
.box {
width: 15rem;
height: 20rem;
padding: 0 2rem 3rem;
transition:
transform 0.3s linear 0s,
filter 0.5s linear 0.3s,
opacity 0.5s linear 0.3s;
/*transform-origin: top center;*/
}
.production {
position: relative;
width: 100%;
height: 100%;
border-radius: 0.2rem;
background-image: url(https://www.lamnia.com/images/sg-150-Shirts_and_T-Shirts.jpg);
background-color: #fff;
background-position: top 3rem center;
background-size: 80%;
background-repeat: no-repeat;
box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1);
transition:
box-shadow 0.5s linear,
height 0.1s linear 0s;
}
.name {
display: block;
padding: 1rem 0.5rem;
}
.description {
position: absolute;
bottom: 1rem;
left: 0;
right: 0;
display: block;
padding: 0 1.5rem;
opacity: 0;
transition: opacity 0.1s linear 0s;
}
.wrapper:hover .box:not(:hover) {
filter: blur(3px);
opacity: 0.5;
}
.box:hover {
transform: scale(1.1);
transition:
transform 0.3s linear 0.3s,
filter 0.1s linear 0s,
opacity 0.1s linear 0s;
}
.box:hover .production {
height: 23rem;
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);
transition:
box-shadow 1s linear,
height 0.3s linear 0.5s;
}
.box:hover .description {
opacity: 1;
transition: opacity 0.3s linear 0.75s;
}
form{
background: white;
text-align: center;
overflow: scroll;
padding: 0;
margin: 0;
max-height: 400px
}
/* This is for pop window */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<head>
<link rel="stylesheet" href=" https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
</head>
<button id="menu"><span id="line"></span><span id="arrow"></span></button>
<nav id="nav">
<ul>
<li class="logo"><img class="logos" src="http://res.cloudinary.com/dvrqqa6ja/image/upload/v1466803605/logo_jayvyh.png"></img></li>
<li>Home </li>
<li>Shop </li>
<li>About Us</li>
<li><div class="search-wrap" js-ui-search>
<input type="text" placeholder="Search..." / js-ui-text>
<span class="eks" js-ui-close></span>
</div> </li>
</ul>
</nav>
<aside id="navbar"><span class="msg"><iframe width="560" height="315" src="https://www.youtube.com/embed/fAE8NyE3RkA" frameborder="0" allowfullscreen></iframe></span>
</aside>
<section id="content">
<img src="http://res.cloudinary.com/dvrqqa6ja/image/upload/v1466885774/kai_di6moq.jpg"class="stuff"> </img>
<h1 class="direct"> <strong>Click the arrow to view Kai Greene's Scar Story</strong></h1>
<span class="msg"><button class="btn btn-danger"data-js="open">Subscribe to our Newsletter</button></span>
</section>
<div class="popup">
<h2>Subscribe to the Newletter:</h2><br>
<form action="#">
First name:<br>
<input type="text" name="firstname" placeholder="firstname"><br>
Last name:<br>
<input type="text" name="lastname" placeholder="lastname"><br><br>
<input type="submit" value="Submit">
</form
<center><button name="close">Close Pop-up</button></center>
</div>
<div class="product_line">
<div class="row">
<div class="col-xs-12">
<span class="products text-center">View other products</span>
</div>
</div>
<div class="row">
<div class="wrapper">
<div class="box">
<div class="production">
<span class="name"></span>
<span class="description"></span>
</div>
</div>
<div class="box">
<div class="production">
<span class="name"></span>
<span class="description"></span>
</div>
</div>
<div class="box">
<div class="production">
<span class="name"></span>
<span class="description"></span>
</div>
</div>
</div>
</div>
</div>
<footer class="footy">
<div class="container-fluid">
<hr>
<div class="row">
<div class="col-xs-4">
<h4 class="about_us">About Us </h4>
</div>
<div class="col-xs-4">
<h4 class="account text-center"> My Account </h4>
</div>
<div class="col-xs-4">
<h4 class="follow"> Follow Us </h4>
</div>
<div class="row">
<div class="col-xs-4">
<p class="about_info"> Dynamik Muscle was spawned on the creation of an idea to see a dream manifest into reality. We all sit back and dream, some even make goals and outline a plan of action, but few follow through.click to read more</p>
</div>
<div class="col-xs-4">
<ul class="links text-center">
<li> Search </li>
<li> About Us </li>
<li>Privacy Policy </li>
<li> Refund Policy </li>
<li> Shipping and Delivery </li>
<li> Ambassador Program </li>
<li> Retailers/Distributors </li>
</ul>
</div>
<div class="col-xs-4">
<ul class="social">
<i class="fa fa-twitter"></i><span></span>
<i class="fa fa-facebook"></i><span></span>
<i class="fa fa-youtube"></i><span></span>
<i class="fa fa-pinterest"></i><span></span>
</ul>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<ul class="reach_out">
<li><i class="fa fa-home" aria-hidden="true"></i> 1120 Holland Drive #20 </li>
<li><i class="fa fa-phone" aria-hidden="true"></i> Call Us at (561) 510-6765</li>
<li><i class="fa fa-envelope" aria-hidden="true"></i> cs#dynamikmuscle.com </li>
</ul>
</div>
</div>
</div>
</footer>
Here is the link to fiddle

You will need to format your
<div class="popup">
<h2>Subscribe to the Newletter:</h2><br>
<center><button name="close">Close Pop-up</button></center>
</div>
But you did not mention how do you want your popup to be displayed, i.e, center ? or anything other information. This works for me and looks good enough.