Minor fixes

StudioLE · Nov 22, 2015 · 3103ada · 3103ada
1 parent 35a1a25
commit 3103ada
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 58 deletions.
diff --git a/README.md b/README.md
@@ -31,12 +31,20 @@ Format your website visuals/slides in the following format
 
 ``` html
 <div id="visuals">
-	<div><img src="assets/img/web/home.jpg"></div>
-	<div><img src="assets/img/web/about.jpg"></div>
-	<div><img src="assets/img/web/contact-us.jpg"></div>
+  <div><img src="assets/img/web/home.jpg"></div>
+  <div><img src="assets/img/web/about.jpg"></div>
+  <div><img src="assets/img/web/contact-us.jpg"></div>
 </div>
 ```
 
+Give `#visuals` a fixed height
+
+``` css
+#visuals {
+  height: 420px;
+}
+```
+
 Finally, call the vispan method in your javascript
 
 ``` js

diff --git a/src/vispan.css b/src/vispan.css
@@ -1,55 +1,56 @@
-.vispan, .vispan-frame {
-	position: relative;
-	overflow: hidden;
-	z-index: 1;
-}
-
-.vispan-slide, .vispan-shadow {
-	position: absolute;
-	top: 0;
-	left: 0;
-	clear: both;
-	z-index: 1;
-	background: red;
-	box-shadow: 0 0 50px #000;
-}
-
-.vispan-current {
-	z-index: 5;
-}
-
-.vispan-shadow {
-	width: 900px;
-	height: 900px;
-	z-index: 4;
-	background: #000;
-}
-
-.vispan-next {
-	z-index: 3;
-}
-
-.vispan-slide img {
-	display: block;
-}
-
-.vispan-btn-previous, .vispan-btn-next {
-	margin: auto;
-	width: 50px;
-	height: 100px;
-	position: absolute;
-	top: 0;
-	bottom: 0;
-	z-index: 10;
-	color: #fff;
-	cursor: pointer;
-	font-size: 72px;
-	font-weight: bold;
-	line-height: 82px;
-	text-align: center;
-	text-shadow: 0 0 12px #000;
-}
-
-.vispan-btn-next {
-	right: 0;
-}
+.vispan, .vispan-frame {
+	position: relative;
+	overflow: hidden;
+	z-index: 1;
+}
+
+.vispan-slide, .vispan-shadow {
+	position: absolute;
+	top: 0;
+	left: 0;
+	clear: both;
+	z-index: 1;
+	background: #000;
+	box-shadow: 0 0 50px #000;
+}
+
+.vispan-current {
+	z-index: 5;
+}
+
+.vispan-shadow {
+	width: 900px;
+	height: 900px;
+	z-index: 4;
+	background: #000;
+}
+
+.vispan-next {
+	z-index: 3;
+}
+
+.vispan-slide img {
+	width: 100%;
+	display: block;
+}
+
+.vispan-btn-previous, .vispan-btn-next {
+	margin: auto;
+	width: 50px;
+	height: 100px;
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	z-index: 10;
+	color: #fff;
+	cursor: pointer;
+	font-size: 72px;
+	font-weight: bold;
+	line-height: 82px;
+	text-align: center;
+	text-shadow: 0 0 12px #000;
+}
+
+.vispan-btn-next {
+	right: 0;
+}