So, I have a question if anyone knows the answer. Im working on my portfolio and found a Codepen I would like to use for my photography page. The only problem is, the pen Im using goes PAST the footer and I would like the footer to move further down the page with each batch of images I add. Ive added an example of the error Im running into, along with the CSS that is being used for the footer. I will also add the full CSS. I've been trying to figure this out on my own, but any help would be very awesome. Thanks. @charset "utf-8"; /* CSS Document */ body { background-color: #fff; margin: 0 auto; width: 100%; height: auto; } header { background-color: #020557; height: 100px; width: 100%; } header h1 { color: #ffffff; font-size: 50px; font-family: "Oswald", Arial, Helvetica, sans-serif; margin: 0; padding: 0; padding-left: 20px; line-height: 100px; } /*------Navigation------*/ .nav { background-color: #efefef; text-align: left; width: 100%; height: auto; } .nav ul { background: #efefef; font-family: "Oswald", Arial, Helvetica, sans-serif; list-style: none; position: relative; display: inline-block; padding: 0 25px; margin: 0 auto; width: auto; } .nav ul:after { content: ""; clear: both; display: block; } .nav ul li { display: inline-block; } .nav ul li:hover > ul { display: block; } .nav ul li:hover { background: #020557; transition: 0.2s ease-in-out; } .nav ul li:hover a { color: #fff; } .nav ul li a { display: block; padding: 5px 22.25px; color: #020557; text-decoration: none; } .nav ul ul { display: none; text-align: left; } .nav ul ul { background: #020557; padding: 0; position: absolute; top: 100%; z-index: 99; } .nav ul ul li { display: block; border-top: 1px solid #fff; position: relative; z-index: 99; } .nav ul ul li a { padding: 5px 22.25px; color: #fff; } .nav ul ul li a:hover { background: #000000; transition: 0.25s ease-in-out; } footer { width: 100%; height: 40px; position: absolute; bottom: 0; left: 0; background: #020557; } footer p { color: #ffffff; font-family: "Oswald", Arial, Helvetica, Sans-serif; font-size: 10px; text-align: center; } .carousel { margin-left: 25%; margin-right: 25%; } ul.slides { display: block; position: relative; height: 600px; margin: 0; padding: 0; overflow: hidden; list-style: none; } .slides * { user-select: none; -ms-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } ul.slides input { display: none; } .slide-container { display: block; } .slide-image { display: block; position: absolute; width: 100%; height: 100%; top: 0; opacity: 0; transition: all .7s ease-in-out; } .slide-image img { width: auto; min-width: 100%; height: 100%; } .carousel-controls { position: absolute; top: 0; left: 0; right: 0; z-index: 999; font-size: 100px; line-height: 600px; color: #fff; } .carousel-controls label { display: none; position: absolute; padding: 0 20px; opacity: 0; transition: opacity .2s; cursor: pointer; } .slide-image:hover + .carousel-controls label{ opacity: 0.5; } .carousel-controls label:hover { opacity: 1; } .carousel-controls .prev-slide { width: 49%; text-align: left; left: 0; } .carousel-controls .next-slide { width: 49%; text-align: right; right: 0; } .carousel-dots { position: absolute; left: 0; right: 0; bottom: 20px; z-index: 999; text-align: center; } .carousel-dots .carousel-dot { display: inline-block; width: 30px; height: 30px; border-radius: 50%; background-color: #fff; opacity: 0.5; margin: 10px; } input:checked + .slide-container .slide-image { opacity: 1; transform: scale(1); transition: opacity 1s ease-in-out; } input:checked + .slide-container .carousel-controls label { display: block; } input#img-1:checked ~ .carousel-dots label#img-dot-1, input#img-2:checked ~ .carousel-dots label#img-dot-2, input#img-3:checked ~ .carousel-dots label#img-dot-3, input#img-4:checked ~ .carousel-dots label#img-dot-4, input#img-5:checked ~ .carousel-dots label#img-dot-5, input#img-6:checked ~ .carousel-dots label#img-dot-6, input#img-7:checked ~ .carousel-dots label#img-dot-7, input#img-8:checked ~ .carousel-dots label#img-dot-8, input#img-9:checked ~ .carousel-dots label#img-dot-9, input#img-10:checked ~ .carousel-dots label#img-dot-10, input#img-11:checked ~ .carousel-dots label#img-dot-11, input#img-12:checked ~ .carousel-dots label#img-dot-12 { opacity: 1; } input#img-1:checked ~ .carousel-dots label#img-dot-1, input#img-2:checked ~ .carousel-dots label#img-dot-2, input#img-3:checked ~ .carousel-dots label#img-dot-3, input#img-4:checked ~ .carousel-dots label#img-dot-4, input#img-5:checked ~ .carousel-dots label#img-dot-5, input#img-6:checked ~ .carousel-dots label#img-dot-6, input#img-7:checked ~ .carousel-dots label#img-dot-7, input#img-8:checked ~ .carousel-dots label#img-dot-8 { opacity: 1; } input#img-1:checked ~ .carousel-dots label#img-dot-1, input#img-2:checked ~ .carousel-dots label#img-dot-2, input#img-3:checked ~ .carousel-dots label#img-dot-3, input#img-4:checked ~ .carousel-dots label#img-dot-4, input#img-5:checked ~ .carousel-dots label#img-dot-5, input#img-6:checked ~ .carousel-dots label#img-dot-6, input#img-7:checked ~ .carousel-dots label#img-dot-7, input#img-8:checked ~ .carousel-dots label#img-dot-8, input#img-9:checked ~ .carousel-dots label#img-dot-9, input#img-10:checked ~ .carousel-dots label#img-dot-10, input#img-11:checked ~ .carousel-dots label#img-dot-11 { opacity: 1; } input#img-1:checked ~ .carousel-dots label#img-dot-1, input#img-2:checked ~ .carousel-dots label#img-dot-2, input#img-3:checked ~ .carousel-dots label#img-dot-3, input#img-4:checked ~ .carousel-dots label#img-dot-4, input#img-5:checked ~ .carousel-dots label#img-dot-5, input#img-6:checked ~ .carousel-dots label#img-dot-6, input#img-7:checked ~ .carousel-dots label#img-dot-7, input#img-8:checked ~ .carousel-dots label#img-dot-8, input#img-9:checked ~ .carousel-dots label#img-dot-9, input#img-10:checked ~ .carousel-dots label#img-dot-10, input#img-11:checked ~ .carousel-dots label#img-dot-11 { opacity: 1; } input:checked + .slide-container .nav label { display: block; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font: 14px/1 'Open Sans', sans-serif; color: #555; background: #e5e5e5; } .gallery { width: 100%; margin: 5%; padding: 5%; } .gallery > div { position: relative; float: left; padding: 5px; } .gallery > div > img { transition: .1s transform; transform: translateZ(0); /* hack */ } .gallery > div:hover { z-index: 1; } .gallery > div:hover > img { transform: scale(1.5,1.5); } .cf:before, .cf:after { display: table; content: ""; line-height: 0; } .cf:after { clear: both; }
... View more