Thumbnail slider with pure css or javascript [duplicate]

Thumbnail slider with pure css or javascript [duplicate] - javascript

This question already has an answer here:
How to create a caption for a pure CSS/HTML Slider with thumbnails, no java/jquery
(1 answer)
Closed 6 years ago.
I just created the css to display in a carousel / slider if the images pass the div but Im not able to create arrows next and back to play thumbs one by one
here is my full css and html without javascript code https://jsfiddle.net/vydxam3y/
I dont know what to use as javascript to complete this.
this is my css:
.thumbnail-slider {
position: relative;
overflow: hidden;
visibility: visible;
*zoom: 1
}
.thumbnail-slider ul{list-style:none;padding:0;margin:0;width:2000em}
.thumbnail-slider ul li {
float: left;
}
.thumbnail-slider .thumb+a {
display: block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
.thumbnail-slider .arrow {
background: #000;
background: rgba(0, 0, 0, 0.5);
height: 50px;
opacity: 0;
padding: 0 10px;
position: absolute;
width: 50px;
z-index: 52;
-webkit-transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out false;
-o-transition: opacity 0.2s ease-in-out false;
transition: opacity 0.2s ease-in-out
}
.thumbnail-slider .arrow.arrow-left:after,
.thumbnail-slider .arrow.arrow-right:after {
color: #fff;
display: block;
margin: 15px 0;
text-align: center
}
.thumbnail-slider .arrow.arrow-right {
right: 0px
}
.noTouch .thumbnail-slider:hover .arrow {
opacity: 1
}
.noTouch .thumbnail-slider ul {
position: absolute;
-webkit-transition: left 0.4s ease-in-out;
-moz-transition: left 0.4s ease-in-out false;
-o-transition: left 0.4s ease-in-out false;
transition: left 0.4s ease-in-out
}
.touch .thumbnail-slider {
-webkit-overflow-scrolling: touch;
overflow-x: auto
}
.touch .thumbnail-slider .arrow {
display: none !important
}
.thumbnail-slider .arrow:after {
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
.thumbnail-slider .arrow {
top: 42px
}
.thumbnail-slider .arrow:after {
font-size: 20px;
font-size: 2rem
}
.thumbnail-slider .arrow.arrow-left:after {
font-family: FontAwesome;
content: "\f095";
}
.thumbnail-slider .arrow.arrow-right:after {
font-family: FontAwesome;
content: "\f095";
}
.thumbnail-slider .video-tag-list img {
display: block
}
.thumbnail-slider .video-tag-list li.face {
margin-left: 5px;
height: 165px;
width: 113px
}
.thumbnail-slider .video-tag-list li.channel,
.thumbnail-slider .video-tag-list li.category {
margin-left: 5px;
height: 165px;
width: 180px
}
.thumbnail-slider .video-tag-list li:first-child {
margin-left: 0
}
.thumbnail-slider .video-tag-list li.category img,
.thumbnail-slider .video-tag-list li.face img,
.thumbnail-slider .video-tag-list li.channel img {
height: 134px
}
.thumbnail-slider .thumb {
display: block;
margin-bottom: 3px
}
.thumbnail-slider .thumb:before {
content: ""
}
.thumbnail-slider .name {
display: inline-block;
max-height: 30px;
max-width: 100%;
overflow: hidden;
word-wrap: break-word
}
.noTouch .video-tag-list li:hover .thumb:before,
.noTouch .video-tag-list li.active .thumb:before {
border-width: 3px
}
.noTouch .video-tag-list .thumb:before {
border: 0 solid #00b1ff;
bottom: 0;
left: 0;
outline: 1px solid #fff;
position: absolute;
right: 0;
top: 0;
z-index: 51;
-webkit-transition: border 0.15s ease-in-out;
-moz-transition: border 0.15s ease-in-out false;
-o-transition: border 0.15s ease-in-out false;
transition: border 0.15s ease-in-out
}
.noTouch .video-tag-list .thumb {
position: relative
}
should I use jquery? or its possible also with pure css?

I think this is what you are looking for.
http://getbootstrap.com/javascript/#carousel

Hey why not you adopt the owlcarousel for your thumbnail slider.
It's very easy to use...check out demos here:
http://www.owlgraphic.com/owlcarousel/#demo

Related

For some reason, my footer isn't very mobile friendly

90% of my website is Mobile-Friendly (everything resizes and such), but for some reason my footer is being basically completely cut off on mobile.
The way I have it setup currently is exactly how I would like it to be setup. This is what it looks like on mobile:
$(function() {
$('.navigation .nav-toggle').on('click', function() {
$('.wrapper').toggleClass('open');
});
});
$(function() {
$('.navigation ul li .home a:not(.navigation .nav-toggle)').on('click', function() {
$('.navigation ul li').removeClass('active');
$(this).addClass('active');
});
});
$(function() {
$('.navigation ul li.home a').addClass('active');
});
body {
margin: 0;
padding: 0;
font-family: sans-serif;
align-items: center;
background: url("../images/bg.png") no-repeat;
background-size: cover;
}
html {
margin: 0;
padding: 0;
height: 100%;
min-height: 100%;
}
.navigation {
width: 100%;
}
.navigation ul {
overflow: hidden;
color: white;
padding: 0;
text-align: right;
margin: 0;
margin-right: 15px;
}
.navigation ul li {
padding: 17px 12px;
display: inline-block;
}
.navigation ul li a {
-webkit-transition: color 0.4s;
-moz-transition: color 0.4s;
-ms-transition: color 0.4s;
-o-transition: color 0.4s;
transition: color 0.4s;
}
.navigation ul li a:hover {
color: #00D5C2;
}
.navigation ul li a {
text-decoration: none;
color: white;
font-size: 115%;
display: block;
}
.side-nav {
position: fixed;
width: 220px;
height: 150vh;
background-color: #2D2D2D;
transform: translateX(-100%);
transition: transform 0.4s ease;
}
.side-nav ul {
margin: 0;
padding: 0;
list-style: none;
z-index: 0;
}
.side-nav ul li {
border-bottom: 1px solid gray;
border-width: 100%;
margin: 5px;
}
.outerwrapper {
height: 100vh;
display: block;
overflow-x: hidden;
position: relative;
}
.wrapper {
height: 100vh;
display: block;
transform: translateX(-100);
transition: transform 0.6s ease;
min-height: 100%;
position: relative;
}
.wrapper.open {
transform: translateX(220px);
background-color: rgba(84, 84, 84, 0.6);
}
.side-nav ul li a {
padding: 10px;
display: block;
color: gray;
text-decoration: none;
}
.side-nav ul li a:hover {
color: white;
text-decoration: none;
}
.side-nav.open {
transform: translateX(0);
}
.navigation .nav-toggle {
display: none;
float: left;
padding: 20px 30px 20px 30px;
cursor: pointer;
}
.footer {
margin-top: -5em;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(237, 237, 237, 0.2);
position: relative;
height: 70px;
z-index: -1;
}
.footerinfo {
margin-top: 20px;
}
.footerinfo p {
vertical-align: middle;
padding: 25px;
color: white;
text-align: center;
;
}
.navigation ul li a.active {
color: #00F0DB;
}
#logo img {
max-width: 100%;
height: auto;
width: auto\9;
display: block;
margin: 0 auto;
}
.footerlogo img {
margin-bottom: -65px;
margin-left: auto;
margin-right: auto;
}
.about-btn {
-webkit-transition: color 0.4s;
-moz-transition: color 0.4s;
-ms-transition: color 0.4s;
-o-transition: color 0.4s;
transition: color 0.4s;
-webkit-transition: border-color 0.4s;
-moz-transition: border-color 0.4s;
-ms-transition: border-color 0.4s;
-o-transition: border-color 0.4s;
transition: border-color 0.4s;
font-size: 135%;
text-transform: uppercase;
text-decoration: none;
vertical-align: middle;
width: auto;
display: block;
}
.about-btn a {
-webkit-transition: color 0.4s;
-moz-transition: color 0.4s;
-ms-transition: color 0.4s;
-o-transition: color 0.4s;
transition: color 0.4s;
-webkit-transition: border-color 0.4s;
-moz-transition: border-color 0.4s;
-ms-transition: border-color 0.4s;
-o-transition: border-color 0.4s;
transition: border-color 0.4s;
color: #3A9DA4;
border-radius: 9px;
padding: 10px 20px;
border: solid #3A9DA4 3px;
text-decoration: none;
font-size: 20px;
transition: all 0, 4s;
}
.about-btn li {
list-style-type: none;
margin: auto;
align-items: center;
width: 50%;
text-align: center;
}
.about-btn a:hover {
border-color: white;
color: white;
text-decoration: none;
font-size: 20px;
transition: scale(1, 1)
}
#media screen and (max-width: 700px) {
.navigation ul li {
display: none;
}
.navigation .nav-toggle {
display: inline;
}
.about-btn a {
font-size: 15px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outerwrapper">
<div class="wrapper">
<div class="side-nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Repo</li>
<li>Code</li>
<li class="pluginrequests">Request Plugin</li>
</ul>
</div>
<div class="navigation">
<ul>
<li class="nav-toggle">&#9776</li>
<li class="home">Home</li>
<li class="repo">Repo</li>
<li class="pluginrequests">Request Plugin</li>
</ul>
</div>
<div id="logo">
<img src="images/logo.png" alt="Squallz Logo">
</div>
<div class="about-btn">
<li>About Me</li>
</div>
</div>
<div class="footer">
<div class="footerinfo">
<p>Copyright Squallz 2017. Personal website by <b>Squallz</b></p>
</div>
</div>
</div>

Try adding this in your css and view again in your mobileL
.outerwrapper {
height: 100%!important;
}

You need to set the css of the footer class to:
z-index: 999 !important;
position: fixed !important;
bottom:0 !important;
background-color: rgba(237, 237, 237, 0.2);

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.

Space between Divs showing in Opera & Chrome browsers

There is space between the .navigation & .navpromo when viewed in opera or chrome browsers. I have tried several tips including making sure there are no spaces in the markup but I can't seem to figure out the solution to make this cross compatible
http://jsfiddle.net/b7kn5bcL/#&togetherjs=Dk6IRzq6Sf
HTML:
<div class="header">
<div class="navbar">
<a href="" class="in" style="display: inline-block;">
<svg class="navinstagram" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 155.2 144" style="enable-background:new 0 0 155.2 144;" xml:space="preserve">
<path d="M42.7,122.7H21.3V54h21.4V122.7z M32,44.6c-6.8,0-12.4-5.6-12.4-12.4c0-6.8,5.5-12.4,12.4-12.4
c6.8,0,12.4,5.5,12.4,12.4C44.4,39,38.9,44.6,32,44.6z M122.7,122.7h-21.3V89.3c0-8-0.1-18.2-11.1-18.2c-11.1,0-12.8,8.7-12.8,17.6
v34H56.1V54h20.5v9.4h0.3c2.8-5.4,9.8-11.1,20.2-11.1c21.6,0,25.6,14.2,25.6,32.7V122.7z"/>
<g>
<path style="fill:#FFFFFF;" d="M151.9,120c0.7-0.1,1-0.5,1-1.1c0-0.8-0.5-1.1-1.4-1.1H150v4h0.6V120h0.7l0,0l1.1,1.7h0.6L151.9,120
L151.9,120z M151.3,119.6h-0.7v-1.4h0.9c0.4,0,0.9,0.1,0.9,0.6C152.4,119.5,151.9,119.6,151.3,119.6z"/>
<path style="fill:#FFFFFF;" d="M151.3,116c-2.1,0-3.8,1.7-3.8,3.8c0,2.1,1.7,3.8,3.8,3.8c2.1,0,3.8-1.7,3.8-3.8
C155.2,117.6,153.5,116,151.3,116z M151.3,123.1c-1.8,0-3.3-1.4-3.3-3.3c0-1.9,1.4-3.3,3.3-3.3c1.8,0,3.3,1.4,3.3,3.3
C154.6,121.7,153.2,123.1,151.3,123.1z"/>
</g>
</svg>
</a>
Logo
<a id="toggle-menu">
<div>
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
</a>
</div>
<div class="nav">
<div class="navigation">
<ul>
<li class="navlist">Home</li>
<li class="navlist">Work</li>
<li class="navlist">Contact</li>
</ul>
</div>
<div id="navpromo">
<ul>
<li class="seemore">Want to see more? Check out my instagram!</li>
<div class='instbtn-cont'>
<a class='instbtn' href='#'>
Instagram
<span class='line-1'></span>
<span class='line-2'></span>
<span class='line-3'></span>
<span class='line-4'></span>
</a>
</div>
CSS:
/*navlist*/
.navigation{
width:100%;
background: #fff;
padding-top: 40px;
padding-bottom: 40px;
}
.navlist {
display: inline-block;
}
.navlist:after {
content: '';
display: block;
height: 1.5px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.navlist:hover:after {
width: 100%;
background: grey;
transition: width .5s ease, background-color .5s ease;
}
/*----/----navlist*/
/*global styles*/
body {
width: 100%;
margin: 0;
list-style: none;
text-decoration: none;
font-size:1.05em;
font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
}
a {
font-size:1.05em;
font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
background:transparent;
color: grey;
border:none;
letter-spacing:0.15em;
text-transform:uppercase;
transition: color 0.5s ease;
list-style: none;
text-decoration: none;
}
/*----/----global styles*/
/*navigation icon*/
#toggle-menu {
float:right;
display: block;
width: 15px;
height: 15px;
padding: 20px;
}
#toggle-menu div {
width: 15px;
height: 15px;
position: relative;
}
.header #toggle-menu span {
display: block;
width: 15px;
height: 3px;
position: absolute;
-webkit-transition: -webkit-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
-moz-transition: -moz-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
transition: transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
-webkit-transform-origin: center;
-moz-transform-origin: center;
transform-origin: center;
}
#toggle-menu span.top {
top: 0px;
}
#toggle-menu span.middle {
top: 6px;
}
#toggle-menu span.bottom {
top: 12px;
}
/*----/----navigation icon*/
/*navigation background transition*/
.bg {
background-color: #fff !important;
border-bottom: 0.5px solid rgba(0, 0, 0, 0.2);
}
.show {
opacity: 1;
}
.navfade {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.header .logo { /* Before scroll */
color: white;
}
.bg .logo { /* After scroll */
color: #545454;
}
.navinstagram {
fill: #fff
}
.bg .navinstagram{
fill: #545454;
}
#toggle-menu span{
background: #fff;
}
.bg #toggle-menu span {
background: #545454;
}
/*----/----navigation background transition*/
/*navigation icon animation*/
#toggle-menu.menu-is-active span {
-webkit-transition: -webkit-transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
-moz-transition: -moz-transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
transition: transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
#toggle-menu.menu-is-active span.top, #toggle-menu.menu-is-active span.middle {
top: 6px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
#toggle-menu.menu-is-active span.middle {
opacity: 0;
}
#toggle-menu.menu-is-active span.bottom {
top: 6px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/*----/----navigation icon animation*/
/*Nav Bar*/
.header {
/*border-bottom: 0.5px solid rgba(0,0,0,.2);*/
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 99999;
background-color: rgb(184, 184, 184);
/*background: none;*/
}
.whitenavbar {
background: white;
}
.nav {
display: none;
list-style-type: none;
position: fixed;
width: 100%;
text-align: center;
left:0;
top: 55px;
border-bottom: 1px solid rgba(0, 0, 0, .2);
border-top: 1px solid rgba(0, 0, 0, .2);
cursor: pointer;
color: #545454;
font-size:.8em;
letter-spacing:0.05em;
}
.nav li {
padding-left: 30px;
padding-right: 30px;
background: #fff;
margin-top: 50px;
margin-bottom: 50px;
}
.seemore {
display: inline-block;
padding-right: 20px;
}
#navpromo {
border-top: 0.5px solid rgba(0, 0, 0, .2);
padding-bottom: 10px;
background: #ffffff;
}
.instbtn-cont {
display: inline-block;
text-align: center;
margin-top: 10px;
padding-bottom: 30px;
}
.instbtn-cont .instbtn {
position: relative;
padding: 15px 20px;
border: 1px solid grey;
color: grey;
-webkit-font-smoothing: antialiased;
}
/*----/----Nav Bar*/
/*in*/
.in {
float:left;
display: inline-block;
width: 25px;
height: 25px;
padding: 15px;
cursor: pointer;
color: #fff;
font-size:.8em;
letter-spacing:0.05em;
border-top: 0.5px solid rgba(0, 0, 0, .2);
}
/*----/----in*/
/*logo*/
.logo {
position: absolute;
left: 47%;
display: inline-block;
width: 15px;
height: 15px;
padding: 18px;
cursor: pointer;
color: #fff;
font-size:.8em;
letter-spacing:0.05em;
}
/*----/----logo*/
/****landscape****/
#media only screen and (max-width: 555px) {
.nav li{
display: block;
margin-top: 20px;
margin-bottom: 20px;
}
.navlist:after {
content: '';
display: block;
height: 1.5px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.navlist:hover:after {
width: 100%;
background: grey;
transition: width .5s ease, background-color .5s ease;
}
}
/*----/----Landscape*/
jQuery:
<script src= "//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
/*navigation icon animation*/
var trigger = 'X';
jQuery(document).ready(function () {
$('#toggle-menu').click(function () {
trigger = 'X';
$(this).toggleClass('menu-is-active')
});
/* click outside of nav to trigger navigation icon animation*/
$(document).click(function () {
if (trigger == 'X') {
$("#toggle-menu").toggleClass();
trigger = 'ham';
}
});
$("nav").click(function (e) {
e.stopPropagation();
return false;
});
/*----/----navigation icon animation*/
/*toggle menu*/
jQuery("#toggle-menu").click(function () {
jQuery(".nav").slideToggle();
if($("div.header").hasClass("whitenavbar") == false){
$("div.header").addClass("whitenavbar bg navup ");
}else{
$("div.header").removeClass("whitenavbar bg navup");
}
});
/* click outside of nav to close toggle*/
$(document).click(function () {
$(".nav").hide();
});
$("#toggle-menu").click(function (e) {
e.stopPropagation();
return false;
});
/*----/----toggle menu*/
/*navigation background fade in fade out */
$(window).scroll(function () {
var dist = $('#panel2').offset().top;
console.log(dist);
if ($(window).scrollTop() > dist) {
$('.header').addClass('bg');
$('.header').addClass('navfade');
}
else {
$('.header').removeClass('bg');
}
});
$('.scroll').on('click', function (e) {
e.preventDefault()
$('html, body').animate({
scrollTop: $(this.hash).offset().top
}, 1500);
});
/*----/-----navigation background fade in fade out */
});
</script>

I'm not sure of the technical terms as I haven't looked it up, but an element with margin spacing will extend out from the content box of its parent element unless either padding, or overflow is set.
A quick fix for this is to give #navpromo the overflow: hidden; property.
Sidenote: I love that menu icon animation! :D

Vertically center div responsively

I'm trying to vertically center the nav panel responsively, so that it is centered on all screens that are ~940px and up. I found this article CSS-Tricks but I have been unable to implement this with my current code effectively.
html
<body>
<!-- Header -->
<div class="header">
<i id="nav-button" class="fa fa-2x fa-navicon"></i>
<header class="logo">
<img src="../Assets/images/logo.png" alt="">
</header>
<i id="account-control" class="fa fa-2x fa-user"></i>
</div>
<!-- Content Wrapper-->
<div class="wrapper">
<!-- Content -->
<div id="content">
</div>
<!-- Collapsible Menu -->
<div id="nav-sidebar">
<div class="nav-items">
<nav class="mainmenu">
<ul>
<li class="active"><i class="fa fa-dashboard" alt="Dashboard"></i></li>
<li><i class="fa fa-dollar" alt="Billing"></i></li>
<li><i class="fa fa-support" alt="Support"></i></li>
<li><i class="fa fa-cubes" alt="Servers"></i></li>
<li><i class="fa fa-cogs" alt="Settings"></i></li>
<li><i class="fa fa-bar-chart-o" alt="Reports"></i></li>
</ul>
</nav>
</div>
</div>
</div>
css
/* Core */
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
display: block;
font-family: "Open Sans", sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 1.42857;
color: black;
background-color: white;
}
ul {
margin: 0;
padding: 0;
-webkit-margin-before: 0em;
-webkit-margin-after: 0em;
-webkit-padding-start: 0px;
}
.wrapper {
position: fixed;
width: 100%;
height: 100%;
top: 75px;
z-index: 0;
}
#content {
position: relative;
left: 0;
z-index: 0;
height: 100%;
overflow: auto;
}
/* Header */
.header {
background-color: white;
width: 100%;
height: 75px;
position: absolute;
top: 0;
z-index: 2;
box-shadow: 1px 0 1px #bdc3c7;
}
#nav-button {
color: #555c60;
position: absolute;
left: 40px;
top: 35%;
-webkit-transition: -webkit-transform 0.2s;
-moz-transition: -moz-transform 0.2s;
transition: transform 0.2s;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
}
#nav-button.nav-button-open {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transition: -webkit-transform 0.2s;
-moz-transition: -moz-transform 0.2s;
transition: transform 0.2s;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
}
.logo {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#account-control {
color: #555c60;
position: absolute;
right: 40px;
top: 35%;
-webkit-transition: -webkit-transform 0.2s;
-moz-transition: -moz-transform 0.2s;
transition: transform 0.2s;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
}
/* Navigation Sidebar */
#nav-sidebar {
position: absolute;
top: 0;
left: 0;
visibility: hidden;
width: 80px;
background: none;
opacity: 1;
z-index: 1;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
transition: all 0.2s;
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
transform: translateX(-100%);
}
#nav-sidebar:after {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
content: '';
opacity: 1;
}
#nav-sidebar:before {
content: '';
height: 100%;
vertical-align: middle;
}
.nav-sidebar-open #nav-sidebar {
visibility: visible;
-webkit-transition-timing-function: ease-in-out;
-moz-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -webkit-transform;
transition-property: transform;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
transform: translateX(0);
-webkit-transition-speed: 0.2s;
-moz-transition-speed: 0.2s;
transition-speed: 0.2s;
}
.nav-sidebar-open #nav-sidebar:after {
width: 0;
height: 0;
opacity: 0;
}
.nav-items {
position: relative;
box-shadow: 1px 1px 1px #bdc3c7;
vertical-align: middle;
}
.mainmenu ul {
list-style: none;
margin: 0;
padding: 0;
}
.mainmenu ul li {
display: block;
text-align: center;
}
.mainmenu ul li a {
position: relative;
display: inline-block;
color: #555c60;
text-decoration: none;
font-size: 18px;
line-height: 80px;
height: 80px;
width: 100%;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
-webkit-transition: background .4s ease-in-out;
-moz-transition: background .4s ease-in-out;
transition: background .4s ease-in-out;
-webkit-transition-property: color,text;
-webkit-transition-duration: .3s, .3s;
-webkit-transition-timing-function: linear, ease-in-out;
-moz-transition-property: color,text;
-moz-transition-duration: .3s;
-moz-transition-timing-function: linear, ease-in-out;
-o-transition-property: color,text;
-o-transition-duration: .3s, .3s;
-o-transition-timing-function: linear, ease-in-out;
}
.mainmenu ul li a:hover, .mainmenu ul li a:active {
background: #3498db;
color: white;
-webkit-transition: background .4s ease-in-out;
-moz-transition: background .4s ease-in-out;
transition: background .4s ease-in-out;
-webkit-transition-property: color,text;
-webkit-transition-duration: .3s, .3s;
-webkit-transition-timing-function: linear, ease-in-out;
-moz-transition-property: color,text;
-moz-transition-duration: .3s;
-moz-transition-timing-function: linear, ease-in-out;
-o-transition-property: color,text;
-o-transition-duration: .3s, .3s;
-o-transition-timing-function: linear, ease-in-out;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
}
.mainmenu ul li a:first-child {
border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.mainmenu ul li a:last-child {
border-bottom: none;
}
.mainmenu ul li a i {
margin: 20px;
}
js
jQuery(document).ready(function($) {
/* Sidebar */
$('#nav-button').click(function() {
$('#nav-button').toggleClass('nav-button-open');
$('body').toggleClass('nav-sidebar-open');
return false;
});
});(jQuery);
P.S. (Don't be afraid of 190 lines of CSS, ~90 lines are CSS transitions that you can ignore.)
Also, here is the jsFiddle for you to play around with. Thank you so much for your help ahead of time.

I am guessing it's the panel that slides out you want to be vertically aligned to the height of the view port if the view port is 940px or wider. I was unsure about other things and so I managed to achieve this but I had to clean it up a bit. Feel free to use parts you need and discard the other. It's not ever a good idea to position:fix the wrapper, not sure why you did this. Also don't know why you had a display:block on the body.
DEMO: http://jsbin.com/zaguzo/1
Same html, same jQuery
You may also want to add a min-height, this is a demo of that: http://jsbin.com/wegow/1
The most relevant is the following but many other things need to be adjusted as well:
/* --- added --- */
#media (min-width:940px) {
#nav-sidebar {
top: 50%;
margin-top: -213px;
/*height of total of this div by 2 minus 1/2 height of header */
}
}
CSS
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body,
html {
margin: 0; /* -- added -- */
padding: 0; /* -- added -- */
}
body {
font-family: "Open Sans", sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 1.42857;
color: black;
background-color: white;
}
ul {
margin: 0;
padding: 0;
}
/* -- wrapper not needed .wrapper {} -- */
#content {
position: relative;
z-index: 0;
padding:95px 20px 20px 20px;
transition: padding .5s ease-in-out;
}
.nav-sidebar-open #content {padding-left:100px;}
/* Header */
.header {
background-color: white;
height: 75px;
position: absolute;
top: 0;
z-index: 2;
box-shadow: 1px 0 1px #bdc3c7;
width: 100%;
}
#nav-button {
color: #555c60;
position: absolute;
left: 40px;
top: 35%;
-webkit-transition: -webkit-transform 0.2s;
-moz-transition: -moz-transform 0.2s;
transition: transform 0.2s;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
}
#nav-button.nav-button-open {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);
}
.logo {
position: absolute;
top: 50%;
left: 50%;
}
#account-control {
color: #555c60;
position: absolute;
right: 40px;
top: 35%;
}
/* Navigation Sidebar */
#nav-sidebar {
position: fixed;
top:75px;
left: -88px;
width: 80px;
background: none;
z-index: 1;
transition: all .5s ease-in-out;
}
.nav-sidebar-open #nav-sidebar {
left:0;
}
.nav-items {
position: relative;
box-shadow: 1px 1px 1px #bdc3c7;
}
.mainmenu ul {
list-style: none;
margin: 0;
padding: 0;
}
.mainmenu ul li {
display: block;
text-align: center;
}
.mainmenu ul li a {
position: relative;
display: block;
color: #555c60;
text-decoration: none;
font-size: 18px;
line-height: 80px;
height: 80px;
width: 100%;
background:#fff;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
/* --- added --- */
#media (min-width:940px) {
#nav-sidebar {
top: 50%;
margin-top: -213px;
/*height of total of this div by 2 minus 1/2 height of header */
}
}

Unslider dots size appearing too large

I am currently putting together a scrolling image gallery using the free unslider jquery code.
I have implemented scrolling arrows and would just like to add dots to show the number of slides and slide location. I have set dots: true in the script.
Here is the result on the site:
cjeffryes.comoj.com
As you can see my CSS is being applied to some degree, you can see that 2 of the slides have an outline with the third being solid, it just seems that the dots themselves are huge. The CSS decalres that the li dots should be 10x10px. Appreciate any help, here is my CSS:
.banner
{
position:absolute;
margin-top:100px;
}
.banner li
{
list-style: none;
min-height:256px;
min-width:960px;
overflow:auto;
float:left;
}
.banner ul
{
padding: 0;
margin: 0;
float:left;
}
.dots
{
position: absolute;
left: 0;
right: 0;
bottom: 20px;
}
.dots li
{
display: inline;
width: 10px;
height: 10px;
margin: 0 4px;
text-indent: -999em;
border: 2px solid #fff;
border-radius: 600px;
cursor: pointer;
opacity: .4;
-webkit-transition: background .5s, opacity .5s;
-moz-transition: background .5s, opacity .5s;
transition: background .5s, opacity .5s;
}
.dots li.active
{
background: #fff;
opacity: 1;
}

1] You have the .banner li set to min-height:256px; min-width:960px;.
2] Just add min-height:none; and min-width:none; to your .dots li CSS declaration.
Change this:
.dots li
{
display: inline;
width: 10px;
height: 10px;
margin: 0 4px;
text-indent: -999em;
border: 2px solid #fff;
border-radius: 600px;
cursor: pointer;
opacity: .4;
-webkit-transition: background .5s, opacity .5s;
-moz-transition: background .5s, opacity .5s;
transition: background .5s, opacity .5s;
}
To this:
.dots li
{
display: inline;
width: 10px;
height: 10px;
margin: 0 4px;
text-indent: -999em;
border: 2px solid #fff;
border-radius: 600px;
cursor: pointer;
opacity: .4;
-webkit-transition: background .5s, opacity .5s;
-moz-transition: background .5s, opacity .5s;
transition: background .5s, opacity .5s;
min-height:none;
min-width:none;
}

Develop Reference

JavaScript is the programming language of the Web.

Thumbnail slider with pure css or javascript [duplicate] - javascript

I think this is what you are looking for. http://getbootstrap.com/javascript/#carousel

Hey why not you adopt the owlcarousel for your thumbnail slider. It's very easy to use...check out demos here: http://www.owlgraphic.com/owlcarousel/#demo

Related

For some reason, my footer isn't very mobile friendly

Popup position issues

Space between Divs showing in Opera & Chrome browsers

Vertically center div responsively

Unslider dots size appearing too large

Categories

Resources