so I'm creating a website and it's so important for me to finish it in time but I hit a problem that creates an annoying bug in android that that makes the body not stretch to the end of the page
here's how to remake this bug:
run the code that I will put below
go to Devtools
turn on mobile mode
heres the code :
let slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
let i;
let slides = document.getElementsByClassName("mySlides");
let dots = document.getElementsByClassName("dot");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
}
document.getElementById("buy-id").addEventListener("click", function() {
localStorage.clear()
localStorage.setItem("buy-item", "id");
window.location.href = window.location.href + "/buy-gem-list";
});
document.getElementById("buy-details").addEventListener("click", function() {
localStorage.clear()
localStorage.setItem("buy-item", "details");
window.location.href = window.location.href + "/buy-gem-list";
});
#font-face {
font-family: yekanbakh;
font-style: normal;
font-weight: 100;
src: url(fonts/yekan-bakh-regular.ttf) format("truetype")
}
* {
font-family: yekanbakh;
font-weight: 400;
box-sizing: border-box;
margin: 0;
}
body {
background-color: #e5e4f3;
width: 100%;
}
.navbar {
display: flex;
flex-direction: row;
position: sticky;
justify-content: center;
padding: 1em;
background-color: rgb(252, 244, 244);
box-shadow: 0 0 4px black;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
.navbar>span {
font-size: 40px;
font-weight: 550;
}
.navbar>.logo {
display: inline-block;
width: 55px;
height: 55px;
background: url("./images/logo.png");
background-size: 56px;
border-radius: 500%;
margin-right: 10px;
}
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
margin-top: 2em;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Caption text */
.text {
color: #161616;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #020202;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active,
.dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
#keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
.buy {
margin-top: 1em;
padding: 1em;
text-align: center;
}
.buy>span {
font-weight: bold;
font-size: 20px;
}
.buy>.items {
display: flex;
justify-content: center;
}
.buy>.items>.item {
width: 75px;
height: 75px;
margin: 0 3px;
background-color: rgb(204, 102, 102);
border-radius: 50%;
cursor: pointer;
background-image: url("images/gem.png");
background-repeat: no-repeat;
background-size: 75px;
}
.buy>.items>.item:hover {
background-color: rgb(223, 68, 68);
}
.social {
margin-top: 1em;
padding: 1em;
text-align: center;
}
.social>span {
font-weight: bold;
font-size: 20px;
}
.social>.items {
display: flex;
justify-content: center;
padding: 1em;
}
.social>.items>.item {
cursor: pointer;
display: flex;
flex-direction: row;
margin: 0 7px;
background-color: #ccc;
padding: 1em;
border-radius: 15px;
}
.social>.items>.item>a {
color: white;
text-decoration: none;
}
.social>.items>.item:hover {
background-color: rgb(126, 107, 107);
}
.whatsapp-link {
margin-top: 1em;
padding: 1em;
text-align: center;
}
.whatsapp-link>span {
font-weight: bold;
font-size: 20px;
}
.whatsapp-link>.items {
display: flex;
justify-content: center;
padding: 1em;
}
.whatsapp-link>.items>.item {
cursor: pointer;
display: flex;
flex-direction: row;
margin: 0 7px;
background-color: #ccc;
padding: 1em;
border-radius: 15px;
}
.whatsapp-link>.items>.item>a {
color: white;
text-decoration: none;
}
.whatsapp-link>.items>.item:hover {
background-color: rgb(126, 107, 107);
}
.footer {
margin-top: 3em;
text-align: right;
background-color: #fff;
padding: 55px;
}
.footer>.about {
padding: 15px;
}
.footer>.about>span {
font-weight: bold;
font-size: 17px;
}
.footer>.about>p {
margin-right: 1.5em;
}
.footer>.copyright {
font-weight: 900;
text-align: center;
color: rgb(225, 10, 10);
}
.itemss {
margin: 3em;
padding: 0.5em;
border: 3px solid #ccc;
border-radius: 15px;
direction: rtl;
display: flex;
flex-direction: row;
flex-wrap: wrap;
background-color: #ccc;
}
.itemss>.item {
margin: 1.25em;
padding: 0.5em;
border: 3px solid #bbb;
background-color: #bbb;
border-radius: 10px;
}
.itemss>.item>.title {
font-weight: bold;
font-size: 20px;
}
.itemss>.item>.price {
font-weight: 600;
color: darkgreen;
}
.itemss>.item>.btn-buy {
padding: 0.5em;
border-radius: 5px;
background-color: rgb(243, 54, 54);
text-align: center;
cursor: pointer;
color: white;
}
.itemss>.item>.btn-buy>a {
text-decoration: none;
color: white;
}
.itemss>.item>.btn-buy:hover {
background-color: rgb(197, 59, 59);
}
.itemss>.item>.gem {
width: 100px;
height: 100px;
background-image: url("../images/gem.png");
background-repeat: no-repeat;
background-size: 100px;
}
.instagram {
width: 25px;
height: 25px;
background-size: 25px;
border-radius: 3px;
background-image: url("./images/instagram.png")
}
.telegram {
width: 25px;
height: 25px;
background-size: 25px;
border-radius: 50%;
background-image: url("./images/telegram.jpg")
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Viva Shop - فروش جم فیری فایر بسیار ارزان</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="./script.js" defer></script>
<meta name="theme-color" content="#5f72da">
<meta name="description" content="شرکت اینترنتی ویوا شاپ جزو بزرگترین فروشگاه های فروش جم بازی کامپیوتری فیری فایر است که کلی محصول با قیمت ارزان دارند">
<link rel="shortcut icon" href="images/logo.png" type="image/x-icon">
</head>
<body>
<div class="navbar">
<div class="logo"></div>
<span>ویوا شاپ</span>
</div>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="images/notAvalibale.png" height="250" style="width:100%">
<div class="text">عکس دریافت نشد</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="images/notAvalibale.png" height="250" style="width:100%">
<div class="text">عکس دریافت نشد</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="images/notAvalibale.png" height="250" style="width:100%">
<div class="text">عکس دریافت نشد</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
<!-- <center><img src="images/bannner.png"></center> -->
<div class="buy">
<span>خرید جم</span>
<div class="items">
<div class="item" id="buy-details">
با اطلاعات
</div>
<div class="item" id="buy-id">
با آیدی
</div>
</div>
</div>
<div class="social">
<span>لینک فضای مجازی</span>
<div class="items">
<div class="item">
<div class="telegram"></div>
تلگرام
</div>
<div class="item">
<div class="instagram"></div>
اینستاگرام
</div>
</div>
</div>
<div class="whatsapp-link">
<span>لینک چنل های واتساپ</span>
<div class="items">
<div class="item">
شعبه 1 واتساپ
</div>
<div class="item">
شعبه 2 واتساپ
</div>
<div class="item">
شعبه 3 واتساپ
</div>
<div class="item">
شعبه 4 واتساپ
</div>
<div class="item">
شعبه 5 واتساپ
</div>
</div>
</div>
<div class="footer">
<!-- <div class="support">
<p>برای تماس با شرکت ویوا شاپ متن پیغامتان را وارد کنید</p>
<div class="inputbox">
<input type="text" name="text-msg" id="support-msg-text">
<div class="submit" id="support-btn-submit">ثبت</div>
</div>
</div> -->
<div class="about">
<span>
درباره ویوا شاپ
</span>
<p>
ویوا شاپ یکی از بزرگ ترین فروشگاه های آیتم های قابل خرید بازی کامپیوتری فیری فایر است که تا کنون بیش از 100 مشتری داشته است و 6 شعبه در واتساپ دارد
</p>
</div>
<hr>
<div class="copyright">
© تمام حقوق این وبسایت متعلق به ویوا شاپ است و هرگونه کپی برداری پیگرد قانونی دارد
</div>
</div>
</body>
</html>
you will get a headache looking at the code
please help me i want to fix it fast
I would like to do a responsive stepper where in the lines in between steppers are connected to each step. Currently only workable with 4 steps, it becomes not responsive once it is more or less than 4 steps.
Here is the jsfiddle, currently workable with 4 steps.
.bullet.completed::after {
content: '';
position: absolute;
bottom: 10px;
height: 1px;
width: calc(133% - 21px);
background-color: #000;
margin-left: 7px;
}
I tried to change this part but it doesn't seem to work. Thanks for advance!
#stepProgressBar {
display: flex;
justify-content: space-between;
align-items: flex-end;
width: 90%;
margin: 0 auto;
margin-bottom: 40px;
}
.step {
text-align: center;
width: 20%;
position: relative;
}
.step-text {
margin-bottom: 10px;
color: #000;
}
.bullet {
border: 1px solid #000;
height: 20px;
width: 20px;
color: #000;
display: inline-block;
transition: background-color 500ms;
line-height: 20px;
}
.bullet.completed {
color: white;
background-color: #000;
}
.bullet.completed::after {
content: '';
position: absolute;
bottom: 10px;
height: 1px;
width: calc(133% - 21px);
background-color: #000;
margin-left: 7px;
}
/* Base styles and helper stuff */
.hidden {
display: none;
}
button {
padding: 5px 10px;
border: 1px solid black;
transition: 250ms background-color;
}
button:hover {
cursor: pointer;
background-color: black;
color: white;
}
button:disabled:hover {
opacity: 0.6;
cursor: not-allowed;
}
.text-center {
text-align: center;
}
.container {
max-width: 100%;
margin: 0 auto;
margin-top: 20px;
padding: 40px;
}
<div class="container">
<div id="stepProgressBar">
<div class="step">
<p class="step-text">Super Duper Long Title</p>
<div class="bullet completed">1</div>
</div>
<div class="step">
<p class="step-text">Long Long Title</p>
<div class="bullet completed">2</div>
</div>
<div class="step">
<p class="step-text">Loooong Title</p>
<div class="bullet completed">3</div>
</div>
<div class="step">
<p class="step-text">Loooong Title</p>
<div class="bullet">4</div>
</div>
</div>
</div>
Modify your .bullet.completed::after to display:flex, and set its width to 100% minus a modified margin-left value, which is equal to the width of the .bullet (20px):
.bullet.completed::after {
content: '';
position: absolute;
bottom: 10px;
height: 1px;
display:flex; /* Added */
width:calc(100% - 20px); /* Modified */
background-color: #000;
margin-left: 20px; /* Modified */
}
Here it is with seven steps:
const previousBtn = document.getElementById('previousBtn');
const nextBtn = document.getElementById('nextBtn');
const finishBtn = document.getElementById('finishBtn');
const content = document.getElementById('content');
const bullets = [...document.querySelectorAll('.bullet')];
const MAX_STEPS = 7;
let currentStep = 1;
nextBtn.addEventListener('click', () => {
bullets[currentStep - 1].classList.add('completed');
currentStep += 1;
previousBtn.disabled = false;
if (currentStep === MAX_STEPS) {
nextBtn.disabled = true;
finishBtn.disabled = false;
}
content.innerText = `Step Number ${currentStep}`;
});
previousBtn.addEventListener('click', () => {
bullets[currentStep - 2].classList.remove('completed');
currentStep -= 1;
nextBtn.disabled = false;
finishBtn.disabled = true;
if (currentStep === 1) {
previousBtn.disabled = true;
}
content.innerText = `Step Number ${currentStep}`;
});
finishBtn.addEventListener('click', () => {
location.reload();
});
#stepProgressBar {
display: flex;
justify-content: space-between;
align-items: flex-end;
width: 90%;
margin: 0 auto;
margin-bottom: 40px;
}
.step {
text-align: center;
width: 20%;
position: relative;
}
.step-text {
margin-bottom: 10px;
color: #000;
}
.bullet {
border: 1px solid #000;
height: 20px;
width: 20px;
color: #000;
display: inline-block;
transition: background-color 500ms;
line-height: 20px;
}
.bullet.completed {
color: white;
background-color: #000;
}
.bullet.completed::after {
content: '';
position: absolute;
bottom: 10px;
height: 1px;
width:calc(100% - 20px);
display:flex;
background-color: #000;
margin-left: 20px;
}
/* Base styles and helper stuff */
.hidden {
display: none;
}
button {
padding: 5px 10px;
border: 1px solid black;
transition: 250ms background-color;
}
button:hover {
cursor: pointer;
background-color: black;
color: white;
}
button:disabled:hover {
opacity: 0.6;
cursor: not-allowed;
}
.text-center {
text-align: center;
}
.container {
max-width: 100%;
margin: 0 auto;
margin-top: 20px;
padding: 40px;
}
<div class="container">
<div id="stepProgressBar">
<div class="step">
<p class="step-text">Super Duper Long Title</p>
<div class="bullet">1</div>
</div>
<div class="step">
<p class="step-text">Long Long Title</p>
<div class="bullet">2</div>
</div>
<div class="step">
<p class="step-text">Loooong Title</p>
<div class="bullet">3</div>
</div>
<div class="step">
<p class="step-text">Title</p>
<div class="bullet ">4</div>
</div>
<div class="step">
<p class="step-text">Title</p>
<div class="bullet ">5</div>
</div>
<div class="step">
<p class="step-text">Title</p>
<div class="bullet ">6</div>
</div>
<div class="step">
<p class="step-text">Title</p>
<div class="bullet ">7</div>
</div>
</div>
<div id="main">
<p id="content" class="text-center">Step Number 1</p>
<button id="previousBtn" class="hidden"></button>
<button id="nextBtn">Next</button>
<button id="finishBtn" class="hidden">Finish</button>
</div>
</div>
I'm creating some Material Design buttons and I'm having some issues getting keyboard tab focus to work with my buttons. Ideally what I would like to do is mimic the effect found in Material UI when you tab through patterns:(https://material-ui-next.com/demos/buttons/), However, I would be happy with just getting focus to work.
I've tried adding class: focus to no avail. Any help would be appreciated
Codepen
<!-- header -->
<header>
<h2 tabindex="0">Material Design Buttons</h2>
</header>
<!-- #end header -->
<!-- Main content -->
<main role="main">
<section>
<h3 class="heading">Raised Buttons</h3>
<div class="wrap">
<div class="holder col-4">
<div class="demo"><button class="rkmd-btn btn-lightBlue" tabindex="0">Primary</button></div>
<div class="captions">Normal Button</div>
</div>
<div class="holder col-4">
<div class="demo"><button class="rkmd-btn btn-lightBlue ripple-effect" tabindex="0">Primary</button></div>
<div class="captions">keyboard Focus</div>
</div>
<div class="holder col-4">
<div class="demo"><button class="rkmd-btn btn-lightBlue ripple-effect" tabindex="0">Primary</button></div>
<div class="captions">Ripple Effect</div>
</div>
<div class="holder col-4">
<div class="demo"><button class="rkmdgrey-btn" disabled tabindex="0">Primary</button></div>
<div class="captions">Disabled Button</div>
</div>
</div>
</section>
<section>
<h3 class="heading">Raised Buttons Secondary</h3>
<div class="wrap">
<div class="holder col-4">
<div class="demo"><button class="rkmdWhite-btn Nutrien-greenSecondary" tabindex="0">Secondary</button></div>
<div class="captions">Normal Button</div>
</div>
<div class="holder col-4">
<div class="demo"><button class="rkmdWhite-btn Nutrien-greenSecondary ripple-effect" tabindex="0">Secondary</button></div>
<div class="captions">Ripple Effect</div>
</div>
<div class="holder col-4">
<div class="demo"><button class="rkmdWhite-btn Nutrien-greenSecondary ripple-effect" tabindex="0">Secondary</button></div>
<div class="captions">Keyboard Focus</div>
</div>
<div class="holder col-4">
<div class="demo"><button class="rkmdgrey-btn" disabled tabindex="0">Secondary</button></div>
<div class="captions">Disabled Button</div>
</div>
</div>
</section>
<section>
<h3 class="heading">Raised Buttons</h3>
<div class="wrap">
<div class="holder col-4">
<div class="demo"><button class="rkmdYellow-btn $Nutrien-green" tabindex="0">CTA</button></div>
<div class="captions">Normal Button</div>
</div>
<div class="holder col-4">
<div class="demo"><button class="rkmdYellow-btn $Nutrien-green ripple-effect" tabindex="0">CTA</button></div>
<div class="captions">Ripple Effect</div>
</div>
<div class="holder col-4">
<div class="demo"><button class="rkmdYellow-btn $Nutrien-green ripple-effect" tabindex="0">CTA</button></div>
<div class="captions">Keyboard Focus</div>
</div>
<div class="holder col-4">
<div class="demo"><button class="rkmdgrey-btn" disabled tabindex="0">CTA</button></div>
<div class="captions">Disabled Button</div>
</div>
</div>
</section>
<!-- <section>
<h3 class="heading">Raised Buttons Yellow</h3>
<div class="wrap">
<div class="holder col-3">
<div class="demo"><button class="rkmdYellow-btn $Nutrien-yellow">Button</button></div>
<div class="captions">Normal Button</div>
</div>
<div class="holder col-3">
<div class="demo"><button class="rkmdYellow-btn $Nutrien-yellow ripple-effect">Button</button></div>
<div class="captions">Ripple Effect</div>
</div>
<div class="holder col-3">
<div class="demo"><button class="rkmd-btn btn-lightBlue" disabled>Button</button></div>
<div class="captions">Disabled Button</div>
</div>
</div>
</section> -->
<!-- <section>
<h3 class="heading">Link Buttons</h3>
<div class="wrap">
<div class="holder col-3">
<div class="demo"><button class="rkmd-btn btn-link">Button</button></div>
<div class="captions">Link Button</div>
</div>
<div class="holder col-3">
<div class="demo"><button class="rkmd-btn btn-link ripple-effect"><i class="material-icons">favorite_border</i>Button</button></div>
<div class="captions">Ripple Effect</div>
</div>
<div class="holder col-3">
<div class="demo"><button class="rkmd-btn btn-link" disabled>Button</button></div>
<div class="captions">Disabled Button</div>
</div>
</div>
</section> -->
<section>
<h3 class="heading">Buttons in Different Colors</h3>
<div class="wrap">
<div class="holder col-4">
<div class="demo"><button class="rkmdTert-btn btn-white ripple-effect ripple-dark" tabindex="0">Tertiary Link</button></div>
<div class="captions">White</div>
</div>
<div class="holder col-4">
<div class="demo"><button style="border: none;" class="rkmd-btn btn-black ripple-effect" tabindex="0">Lorem Ipsum</button></div>
<div class="captions">Black</div>
</div>
<!-- <div class="holder col-4">
<div class="demo"><button class="rkmd-btn btn-grey ripple-effect ripple-dark"><i class="material-icons">file_download</i>Download</button></div>
<div class="captions">Grey</div>
</div>
<div class="holder col-4">
<div class="demo"><button class="rkmd-btn btn-lightBlue ripple-effect"><i class="material-icons">file_download</i>Download</button></div>
<div class="captions">Green</div>
</div> -->
</section>
<!-- <section>
<h3 class="heading">Fab Buttons</h3>
<div class="wrap">
<div class="holder col-3">
<div class="demo"><button style="background: #ffffff; border: none; shadow: none;" class="rkmd-btn btn-fab btn-lightBlue ripple-effect"><i style="color: black;" class="material-icons">attach_file</i></button></div>
<div class="captions">Normal Button</div>
</div>
<div class="holder col-3">
<div class="demo"><button class="rkmd-btn btn-fab-mini btn-pink ripple-effect"><i class="material-icons">favorite_border</i></button></div>
<div class="captions">Mini Button</div>
</div>
<div class="holder col-3">
<div class="demo"><button class="rkmd-btn btn-fab-mini btn-lightBlue" disabled><i class="material-icons">cloud_upload</i></button></div>
<div class="captions">Disabled Button</div>
</div>
</div>
</section> -->
</main>
// Buttons Color
$Nutrien-green: #00B455;
$Nutrien-green--hover: #00DD68;
$Nutrien-greenSecondary: #FFF;
$Nutrien-greenSecondary--hover: #00DD68;
$Nutrien-yellow: #F9E051;
$Nutrien-yellow--hover: #E9CE1A;
$Nutrien-disabled: #DFDFDF;
$btn_default: #e0e0e0;
$btn_lightBlue: #00B455;
$btn_white: #FFF;
$btn_black: #111;
$btn_grey: #f5f5f5;
$btn_orange: #ff9800;
$btn_amber: #ffc107;
$btn_green: #4caf50;
$btn_teal: #009688;
$btn_cyan: #00bcd4;
$btn_indigo: #3f51b5;
$btn_deepPurple: #673ab7;
$btn_pink: #e91e63;
$btn_red: #f44336;
$btn_yellow: #ffeb3b;
$btn_lime: #cddc39;
$btn_brown: #795548;
// KEYFRAMES
#mixin keyframes($animation-name) {
#-webkit-keyframes #{$animation-name} {
#content;
}
#-moz-keyframes #{$animation-name} {
#content;
}
#-ms-keyframes #{$animation-name} {
#content;
}
#-o-keyframes #{$animation-name} {
#content;
}
#keyframes #{$animation-name} {
#content;
}
}
// Column generator
#mixin colmk($numRows, $margin) {
width: ((100% - (($numRows - 1) * $margin)) / $numRows);
&:nth-child(n) {
margin-right: $margin;
margin-bottom: $margin;
}
&:nth-child(#{$numRows}n) {
margin-right: 0;
margin-bottom: 0;
}
}
/* -----------------------------------------------------
Body
-------------------------------------------------------- */
body {
margin: 0;
padding: 0;
color: #646360;
font-size: 16px;
font-family: arial;
background-color: #eee;
}
*, *::after, *::before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
a {
color: #03a9f4;
outline: none;
text-decoration: none;
&:hover { text-decoration: underline; }
}
/* -----------------------------------------------------
Main
-------------------------------------------------------- */
main {
width: 100%;
max-width: 940px;
margin: 1.4rem auto;
section {
display: block;
margin-bottom: 1.4rem;
padding: 1.2rem;
background-color: #fff;
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.157);
&:last-child { margin-bottom: 0; }
.heading {
margin: 0;
padding: 0;
font-size: 1.2rem;
}
.wrap {
overflow: hidden;
display: block;
margin: 1rem 0 0.8rem;
text-align: center;
.holder {
float: left;
//display: inline-block;
//margin-right: 8px;
//margin-bottom: 8px;
text-align: center;
background-color: #fff;
&:last-child { margin-right: 0; }
&.col-3 {
//width: calc(100% / 3 - 8px);
#include colmk(3, 1%);
}
&.col-4 {
//width: calc(100% / 4 - 9px);
//&:nth-child(4n) { margin-right: 0; }
#include colmk(4, 1%);
}
.demo {
min-height: 120px;
padding: 2em 0;
display: flex;
justify-content: center;
align-content: center;
}
.captions {
padding: 8px;
color: rgba(0,0,0,0.5);
font-size: 13px;
font-weight: bold;
border-top: 1px solid rgba(0,0,0,0.1);
}
#media only screen and (max-width: 860px) {
&.col-4 {
#include colmk(3, 1%);
}
}
#media only screen and (max-width: 640px) {
float: none;
&.col-3,
&.col-4 {
display: block;
width: 100%;
&:nth-child(n) { margin: 0; margin-bottom: 14px; }
}
}
}
}
}
#media only screen and (max-width: 960px) {
padding: 0 1.5%;
}
}
/* -----------------------------------------------------
Header
-------------------------------------------------------- */
header {
display: block;
width: 100%;
padding: 12px 0;
text-align: center;
background-color: #FFF;
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1);
h2 {
margin: 0;
padding: 25px 0;
font-size: 2em;
font-weight: 300;
letter-spacing: 1px;
}
}
/* -----------------------------------------------------
Footer
-------------------------------------------------------- */
footer {
display: block;
overflow: hidden;
width: 100%;
min-height: 80px;
background-color: #FFF;
border-top: 1px solid #EEE;
.row {
width: 100%;
max-width: 860px;
margin: 0 auto;
}
.footer-content {
margin: 0 8px;
padding: 25px 0 18px;
text-align: center;
span {
color: rgba(0, 0, 0, 0.525);
font-size: 0.857em;
margin-right: 5px;
}
}
#media only screen and (max-width: 768px) {
span {
display: block;
width: 100%;
margin-bottom: 8px;
}
}
}
/* ----------------------------------------------------------------------
Material Design Raised Buttons - by Ravikumar Chauhan
------------------------------------------------------------------------- */
.rkmdTert-btn {
display: inline-block;
position: relative;
cursor: pointer;
height: 40px;
padding: 0 16px 0 16px;
line-height: 35px;
color: #00B455;
font-size: 14px;
font-weight: bold !important;
font-family: arial;
letter-spacing: .8px;
text-align: center;
text-decoration: none;
vertical-align: middle;
white-space: nowrap;
outline: none;
border: none;
user-select: none;
border-radius: 2px;
transition: all .3s ease-out;
&:hover { }
}
.rkmd-btn {
border: 1px solid $Nutrien-green;
display: inline-block;
position: relative;
cursor: pointer;
height: 40px;
padding: 0 16px 0 16px;
line-height: 35px;
color: #00B455;
font-size: 14px;
font-weight: bold !important;
font-family: arial;
letter-spacing: .8px;
text-align: center;
text-decoration: none;
vertical-align: middle;
white-space: nowrap;
outline: none;
user-select: none;
border-radius: 2px;
transition: all .3s ease-out;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.225);
&:hover { text-decoration: none; box-shadow: 0 4px 10px 0px rgba(0,0,0,0.225); border: 1px solid $Nutrien-greenSecondary--hover; }
}
.rkmdgrey-btn {
display: inline-block;
position: relative;
cursor: pointer;
height: 40px;
padding: 0 16px 0 16px;
line-height: 35px;
color: #A1A1A1;
background-color: #DFDFDF;
font-size: 14px;
font-weight: bold !important;
font-family: arial;
letter-spacing: .8px;
text-align: center;
text-decoration: none;
vertical-align: middle;
white-space: nowrap;
outline: none;
border: none;
user-select: none;
border-radius: 2px;
transition: all .3s ease-out;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.225);
&:hover { text-decoration: none; box-shadow: 0 4px 10px 0px rgba(0,0,0,0.225); }
}
.rkmdWhite-btn {
border: 1px solid #00B455;
display: inline-block;
position: relative;
cursor: pointer;
height: 40px;
padding: 0 16px 0 16px;
line-height: 35px;
color: #00B455;
font-size: 14px;
font-weight: bold !important;
font-family: Arial;
letter-spacing: .8px;
text-align: center;
text-decoration: none;
vertical-align: middle;
white-space: nowrap;
outline: none;
user-select: none;
border-radius: 2px;
transition: all .3s ease-out;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.225);
&:hover { text-decoration: none; box-shadow: 0 4px 10px 0px rgba(0,0,0,0.225); background: $Nutrien-green--hover; color: white;
border: 1px solid $Nutrien-greenSecondary--hover;}
}
.rkmdYellow-btn {
border: 1px solid $Nutrien-yellow;
background-color: #F9E051;
display: inline-block;
position: relative;
cursor: pointer;
height: 40px;
padding: 2px 16px 0 16px;
line-height: 35px;
color: black;
font-size: 14px;
font-weight: bold !important;
font-family: Arial;
letter-spacing: .8px;
text-align: center;
text-decoration: none;
vertical-align: middle;
white-space: nowrap;
outline: none;
user-select: none;
border-radius: 2px;
transition: all .3s ease-out;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.225);
&:hover { text-decoration: none; box-shadow: 0 4px 10px 0px rgba(0,0,0,0.225); background-color: #E9CE1A; border: 1px solid $Nutrien-yellow--hover;}
}
/* ----------------------------------------------------------------------
Material Design Fab Buttons - by Ravikumar Chauhan
------------------------------------------------------------------------- */
.rkmd-btn {
&.btn-fab,
&.btn-fab-mini {
overflow: hidden;
position: relative;
margin: auto;
padding: 0;
line-height: normal;
border-radius: 50%;
box-shadow: 0 2px 5px 1px rgba(0,0,0,0.3);
&:hover { box-shadow: 0 4px 11px 0px rgba(0,0,0,0.375); }
i {
display: inline-block;
float: none;
width: inherit;
margin: 0;
font-size: inherit;
text-align: center;
line-height: none;
vertical-align: middle;
}
}
&.btn-fab {
width: 56px;
height: 56px;
font-size: 28px;
}
&.btn-fab-mini {
width: 40px;
height: 40px;
font-size: 24px;
}
}
/* Buttons Color */
.rkmd-btn {
&.btn-lightBlue {
color: #FFF;
background-color: $btn_lightBlue;
&:hover { background-color: lighten($btn_lightBlue, 8%); }
}
&.btn-white {
color: #444;
background-color: $btn_white;
&:hover { background-color: darken($btn_white, 2%); }
}
&.btn-black {
color: #bdbdbd;
background-color: $btn_black;
&:hover { background-color: lighten($btn_black, 8%); }
}
&.btn-grey {
color: #757575;
background-color: $btn_grey;
&:hover { background-color: darken($btn_grey, 4%); }
}
&.btn-orange {
color: #FFF;
background-color: $btn_orange;
&:hover { background-color: lighten($btn_orange, 8%); }
}
&.btn-amber {
color: #FFF;
background-color: $btn_amber;
&:hover { background-color: lighten($btn_amber, 8%); }
}
&.btn-green {
color: #FFF;
background-color: $btn_green;
&:hover { background-color: lighten($btn_green, 8%); }
}
&.btn-teal {
color: #FFF;
background-color: $btn_teal;
&:hover { background-color: lighten($btn_teal, 8%); }
}
&.btn-cyan {
color: #FFF;
background-color: $btn_cyan;
&:hover { background-color: lighten($btn_cyan, 8%); }
}
&.btn-indigo {
color: #FFF;
background-color: $btn_indigo;
&:hover { background-color: lighten($btn_indigo, 8%); }
}
&.btn-deepPurple {
color: #FFF;
background-color: $btn_deepPurple;
&:hover { background-color: lighten($btn_deepPurple, 8%); }
}
&.btn-pink {
color: #FFF;
background-color: $btn_pink;
&:hover { background-color: lighten($btn_pink, 8%); }
}
&.btn-red {
color: #FFF;
background-color: $btn_red;
&:hover { background-color: lighten($btn_red, 8%); }
}
&.btn-yellow {
color: #FFF;
background-color: $btn_yellow;
&:hover { background-color: darken($btn_yellow, 13%); }
}
&.btn-lime {
color: #FFF;
background-color: $btn_lime;
&:hover { background-color: darken($btn_lime, 8%); }
}
&.btn-brown {
color: #FFF;
background-color: $btn_brown;
&:hover { background-color: lighten($btn_brown, 8%); }
}
}
/* Raised Buttons Size (Not work in Fab Buttons) */
.rkmd-btn {
&.btn-lg {
height: 48px;
line-height: 48px;
}
&.btn-sm {
height: 30px;
padding: 0 1rem;
line-height: 30px;
font-size: 12px;
}
&.btn-xs {
height: 24px;
padding: 0 .4rem;
line-height: 24px;
font-size: 11px;
font-weight: 300;
letter-spacing: .2px;
}
}
/* Raised Buttons Types */
.rkmd-btn {
&.disabled, &[disabled] {
cursor: default !important;
color: #9e9e9e !important;
box-shadow: none !important;
}
&.disabled:not(.btn-flat), &[disabled]:not(.btn-flat) {
background-color: #cdcdcd !important;
&:hover { background-color: #cdcdcd !important; }
}
&.btn-flat {
box-shadow: none !important;
background-color: transparent !important;
&:hover { background-color: #cecece !important; box-shadow: none !important; }
&.disabled:hover,
&[disabled]:hover { background-color: transparent !important; }
}
&.btn-link {
color: #3949ab !important;
box-shadow: none !important;
background-color: transparent !important;
&:hover {
text-decoration: underline !important;
background-color: transparent !important;
box-shadow: none !important;
}
&.disabled,
&[disabled] {
color: #9fa8da !important;
text-decoration: underline !important;
background-color: transparent !important;
}
&.disabled:hover,
&[disabled]:hover { background-color: transparent !important; }
}
i {
float: left;
width: auto;
height: auto;
margin-right: 10px;
font-size: 1.3rem;
line-height: inherit;
&.right {
float: right !important;
margin: 0;
margin-left: 10px;
}
}
}
/* ----------------------------------------------------------------------
Material Design Ripple Effect - by Ravikumar Chauhan
------------------------------------------------------------------------- */
.ripple-effect {
display: inline-block;
position: relative;
overflow: hidden;
cursor: pointer;
vertical-align: middle;
user-select: none;
z-index: 1;
.ripple {
display: block;
position: absolute;
border-radius: 100%;
background: rgba(255,255,255,0.5);
transform: scale(0);
pointer-events: none;
}
&.ripple-dark {
.ripple {
background: rgba(0,0,0,0.1) !important;
}
}
&.ripple-red {
.ripple {
background: rgba(244,67,54,0.725) !important;
}
}
&.ripple-orange {
.ripple {
background: rgba(255,152,0,0.725) !important;
}
}
&.ripple-yellow {
.ripple {
background: rgba(255,235,59,0.725) !important;
}
}
&.ripple-green {
.ripple {
background: rgba(221,104,100,0.725) !important;
}
}
&.ripple-purple {
.ripple {
background: rgba(156,39,176,0.725) !important;
}
}
&.ripple-teal {
.ripple {
background: rgba(0,150,136,0.725) !important;
}
}
&.ripple-pink {
.ripple {
background: rgba(233,30,99,0.725) !important;
}
}
.animated {
animation: ripple 0.6s linear;
}
#include keyframes('ripple') {
100% {
opacity: 0;
transform: scale(2.5);
}
}
}
$(document).ready(function() {
$('.ripple-effect').rkmd_rippleEffect();
});
(function($) {
$.fn.rkmd_rippleEffect = function() {
var btn, self, ripple, size, rippleX, rippleY, eWidth, eHeight;
btn = $(this).not('[disabled], .disabled');
btn.on('mousedown', function(e) {
self = $(this);
// Disable right click
if(e.button === 2) {
return false;
}
if(self.find('.ripple').length === 0) {
self.prepend('<span class="ripple"></span>');
}
ripple = self.find('.ripple');
ripple.removeClass('animated');
eWidth = self.outerWidth();
eHeight = self.outerHeight();
size = Math.max(eWidth, eHeight);
ripple.css({'width': size, 'height': size});
rippleX = parseInt(e.pageX - self.offset().left) - (size / 2);
rippleY = parseInt(e.pageY - self.offset().top) - (size / 2);
ripple.css({ 'top': rippleY +'px', 'left': rippleX +'px' }).addClass('animated');
setTimeout(function() {
ripple.remove();
}, 800);
});
};
}(jQuery));
I am trying to change the color of a row of a table on hover.
by using row: hover, but by this way it is just hovering a perticular cell which is obvious.
but when I try using row cell: hover, then it is not having any effect. this is my html.
JSfiddle: https://jsfiddle.net/f4ojhxco/2/
<div id="table">
<div class="header-row row">
<span class="cell">SI. No.</span>
<span class="cell">Application Date</span>
<span class="cell">Customer Name</span>
<span class="cell">Loan Amount</span>
<span class="cell">Loan Status</span>
<span class="cell">Action</span>
</div>
<div class="row" *ngFor="let item of customerList ; let i= index;">
<input type="radio" name="expand">
<span class="cell" data-label="SI. No.">{{i+1}}</span>
<span class="cell" data-label="Application Date">{{item.date}}</span>
<span class="cell" data-label="Customer Name">
{{item.name}}</span>
<span class="cell" data-label="Loan Amount">{{item.amount}}</span>
<span class="cell" data-label="Loan Status">{{item.status}}</span>
<span class="cell" data-label="Action">
More Details
</span>
</div>
</div>
Give the style as follows by removing the space between the class .row and :hover.
.row:hover {
background: green;
}
Just add the !important keyword.
.row :hover {
background: green !important;
}
JSfiddle: https://jsfiddle.net/f4ojhxco/3/
Try This:
body {
background: #cacaca;
margin: 0;
padding: 20px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
#table {
display: table;
width: 100%;
background: #fff;
margin: 0;
box-sizing: border-box;
}
.caption {
display: block;
width: 100%;
background: #64e0ef;
height: 55px;
padding-left: 10px;
color: #fff;
font-size: 20px;
line-height: 55px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
box-sizing: border-box;
}
.header-row {
background: #8b8b8b;
color: #fff;
}
.row {
display: table-row;
}
.row :hover {
background: green;
}
.cell {
display: table-cell;
padding: 23px;
border-bottom: 1px solid #e5e5e5;
text-align: center;
}
.primary {
text-align: left;
}
input[type="radio"],
input[type="checkbox"] {
display: none;
}
#media only screen and (max-width: 760px) {
body {
padding: 0;
}
#table {
display: block;
margin: 44px 0 0 0;
}
.caption {
position: fixed;
top: 0;
text-align: center;
height: 44px;
line-height: 44px;
z-index: 5;
border-bottom: 2px solid #999;
}
.row {
position: relative;
display: block;
border-bottom: 1px solid #ccc;
}
.header-row {
display: none;
}
.cell {
display: block;
border: none;
position: relative;
height: 45px;
line-height: 45px;
text-align: left;
}
.primary:after {
content: "";
display: block;
position: absolute;
right: 20px;
top: 18px;
z-index: 2;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid #ccc;
}
.cell:nth-of-type(n+2) {
display: none;
}
input[type="radio"],
input[type="checkbox"] {
display: block;
position: absolute;
z-index: 1;
width: 99%;
height: 100%;
opacity: 0;
}
input[type="radio"]:checked,
input[type="checkbox"]:checked {
z-index: -1;
}
input[type="radio"]:checked~.cell,
input[type="checkbox"]:checked~.cell {
display: block;
border-bottom: 1px solid #eee;
}
input[type="radio"]:checked~.cell:nth-of-type(n+2),
input[type="checkbox"]:checked~.cell:nth-of-type(n+2) {
background: #e0e0e0;
}
input[type="radio"]:checked~.cell:nth-of-type(n+2):before,
input[type="checkbox"]:checked~.cell:nth-of-type(n+2):before {
content: attr(data-label);
display: inline-block;
width: 60px;
background: #999;
border-radius: 10px;
height: 20px;
margin-right: 10px;
font-size: 12px;
line-height: 20px;
text-align: center;
color: white;
}
input[type="radio"]:checked~.primary,
input[type="checkbox"]:checked~.primary {
border-bottom: 2px solid #999;
}
input[type="radio"]:checked~.primary:after,
input[type="checkbox"]:checked~.primary:after {
position: absolute;
right: 18px;
top: 22px;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
border-top: 10px solid #ccc;
z-index: 2;
}
}
.cell{
height:10px;
background:green;
}
.cell:hover{
background:red;
}
<div id="table">
<div class="header-row row">
<span class="cell">SI. No.</span>
<span class="cell">Application Date</span>
<span class="cell">Customer Name</span>
<span class="cell">Loan Amount</span>
<span class="cell">Loan Status</span>
<span class="cell">Action</span>
</div>
<div class="row" >
<input type="radio" name="expand">
<span class="cell" data-label="SI. No.">1</span>
<span class="cell" data-label="Application Date">5-jan-2017</span>
<span class="cell" data-label="Customer Name">
mr xyz</span>
<span class="cell" data-label="Loan Amount">60k</span>
<span class="cell" data-label="Loan Status">open</span>
<span class="cell" data-label="Action">
More Details
</span>
</div>
</div>
Just remove space between .row and :hover
.row:hover{
background: green;
}
Try this
#table .row:hover {
/*add your css here*/
}
Using Bootstrap for some video launching with Modal and I keep getting a weird offset video at the end of my webpage and when I click on the anchor tag it brings me to a dead link. I built a jsfiddle to even show my work. I only replaced the image and video, but I got the images from off line so its basically mimicking my code.
HTML:
<a data-toggle="modal" href="#videoModal">
<img class="img-responsive img-rounded" src="http://iconshots.com/wp-content/uploads/2010/01/final1.jpg">
</a>
<div class="modal fade" id="videoModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Learn how to make this app!</h4>
</div>
<div class="modal-body">
<iframe width="500" height="281" src="http://youtu.be/GWPc6EDwv8k" frameborder="0"></iframe>
</div>
</div>
</div>
</div>
CSS:
/* Typography
================================= */
#font-face {
font-family:'icomoon';
src:url('../fonts/icomoon.eot');
src:url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'), url('../fonts/icomoon.woff') format('woff'), url('../fonts/icomoon.ttf') format('truetype'), url('../fonts/icomoon.svg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
h1 {
font-weight: 200;
margin-bottom: 30px;
}
h2, h3 {
font-size: 1.25em;
color: #5f5d60;
margin-bottom: 16px;
margin-top: 0;
}
p {
color: #b3aeb5;
line-height: 1.7;
font-size: 1.1em;
font-weight: 200;
}
strong {
color: #5f5d60;
}
.navbar-text {
font-weight: bold;
margin-right: 0;
}
.lead {
color: #d5c1f2;
margin-bottom: 70px;
}
.lead:nth-of-type(2) {
font-size: initial;
margin-bottom: 20px;
}
.main-footer {
font-size: .95em;
}
.link-list {
list-style-type: none;
line-height: 1.8;
margin: 0;
padding: 0;
}
.copyright {
opacity: .8;
font-size: .9em;
}
/* Links
================================= */
.main-footer a {
color: #a6afb2;
}
.link-list .heading {
font-weight: bold;
margin-bottom: 10px;
}
/* Layout
================================= */
hr {
margin-bottom: 58px;
}
.ft {
margin-bottom: 72px;
}
.ft-copy {
padding-top: 32px;
}
.ft-copy p, .copy-offset {
width: 88%;
}
.panel {
background-image: url('../img/form-panel-bg.png');
background-repeat: repeat-x;
border-bottom: solid 1px #eee;
padding: 42px 0;
margin: 80px 0 132px 0;
}
.callout {
padding: 35px 0;
margin-top: 64px;
text-align: center;
border: 1px solid #e3e3e3;
border-right: none;
border-left: none;
}
.callout .glyphicon {
margin-left: 10px;
}
.teacher-desc strong {
display: block;
}
.th-copy {
padding-top: 30px;
}
.main-footer {
margin: 100px 0 80px 0;
}
/* Form
================================= */
.phone-txt {
padding: 24px 12px;
width: 90%;
}
.btn-submit {
color: inherit;
font-size: 1.6em;
background: transparent;
position: absolute;
right: 55px;
bottom: 3px;
}
/* Buttons
================================= */
.btn-default {
border-width: 2px;
border-color: inherit;
margin-right: 10px;
padding: 12px 22px;
}
.btn-default:hover {
background-color: #fff;
color: #957bba;
border-color: #fff;
}
.btn:active {
box-shadow: none;
}
.panel .btn-default:hover {
background-color: #ccc;
color: #f7f7f7;
border-color: #ccc;
}
.btn-success {
box-shadow: 0 3px 0 #23812f;
text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
font-size: 1.5em;
width: 330px;
padding: 15px 0;
}
/* Jumbotron
================================= */
.jumbotron {
background-image: url('../img/main-bg.png');
background-repeat: no-repeat;
background-position: 200% 100%;
padding: 200px 0 140px 0;
margin-bottom: 70px;
}
.device {
width: 345px;
height: 589px;
background: url('../img/device-hero.png') no-repeat;
}
/* Logos & Icons
================================= */
.main-logo {
width: 124px;
height: 34px;
margin-top: 22px;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
background: url('../img/main-logo.png') no-repeat;
background-size: 100%;
}
.ft-icon {
width: 94%;
height: 196px;
position: relative;
background: #8c73b0 url('../img/main-bg.png') no-repeat 270px -180px;
background-size: 140%;
}
.ft-icon.friends {
background-position: -500px 0px;
}
.ft-icon.cloud {
background-position: 260px 0px;
}
.ft-icon:before {
content:"";
display: block;
position: absolute;
width: 164px;
height: 102px;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
background: url('../img/feature-icons.png') no-repeat;
background-size: 100%;
}
.friends:before {
background-position: 0 -105px;
}
.cloud:before {
background-position: 0 -210px;
}
[data-icon]:before {
font-family:'icomoon';
content: attr(data-icon);
speak: none;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
margin-right: 8px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.th-logo {
width: 155px;
margin: -.75em 0 .95em 0;
}
/* Media Queries
================================= */
#media (max-width: 991px) {
.jumbotron {
padding-top: 120px;
padding-bottom: 20px;
background-position: 10% 10%;
}
.ft-copy {
padding-top: 12px;
}
.ft-copy p {
width: auto;
}
.device {
margin-top: 28px;
}
}
#media (max-width: 767px) {
.navbar {
min-height: 60px;
}
.main-logo {
width: 82px;
margin-top: 20px;
}
.jumbotron {
padding-top: 80px;
margin-bottom: 32px;
}
.lead {
margin-bottom: 40px;
}
.ft {
margin-bottom: 16px;
}
hr {
margin-bottom: 40px;
}
.btn-success {
width: 85%;
font-size: initial;
}
.callout, .link-list {
margin-top: 32px;
}
.main-footer {
margin-top: 64px;
}
.link-list {
float: left;
margin-right: 32px;
}
}
Are you sure you have included all required JS libraries such as jQuery and Bootstrap.js
I have copied your code to Codepen and it works perfectly for me (click on the gears near CSS and JS titles to see included libraries)
Codepen example
<a data-toggle="modal" href="#videoModal">
<img class="img-responsive img-rounded" src="http://iconshots.com/wp-content/uploads/2010/01/final1.jpg">
</a>
<div class="modal fade" id="videoModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Learn how to make this app!</h4>
</div>
<div class="modal-body">
<iframe width="560" height="315" src="http://www.youtube.com/embed/KueEWP91tWc" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>