Hi Everyone, I was able to make a responsive slideshow work. But it looks like since there is no height set for the slideshow itself ( since it is resposnsive) the text under it jumps up and down ( slight movement ) as the images changes in the slideshow. I have tried margin, padding, setting height to the parent element and then setting 100% height to the slideshow itself but it is helping. But if I set the height specifically to slideshow in pixel amount the jumping stops. Is ther any work around this? I have this on a live server, you can see it here
My HTML is
<!DOCTYPE html>
<html lang="en">
<head>
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta charset="utf-8">
<meta content="by Rajeev Thomas." name="author">
<meta content="Copyright © 2014 rajeevthomas.com" name="Copyright">
<link href="/root//favicon.ico" rel="icon" type="image/x-icon">
<title>Home Page title</title>
<meta content="Photographer Website" name="keywords">
<meta content="Home Page Description" name="description">
<link href="/root/theme/site/css/styles.css" rel="stylesheet" type=
"text/css">
<script src="/root/theme/site/js/jquery-1.2.6.min.js" type=
"text/javascript"></script>
<script src="/root/theme/site/js/jquery.touchwipe.1.1.1.js" type=
"text/javascript"></script>
<script src=
"http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="/root/theme/site/js/responsiveslides.min.js" type=
"text/javascript"></script>
</head>
<body>
<header>
<a href="/root/"><span></span></a>
<nav>
<ul class="nav">
<li>
<a href="/root/">HOME</a>
</li>
<li> <a href="/root/photos">MY GALLERIES</a>
</li>
<li> <a href="/root/search">SEARCH</a>
</li>
<li> <a href="/root/about-me">ABOUT ME</a>
</li>
<li></li>
</ul>
</nav>
</header>
<div class="container">
<article>
<div id="slideshowContainer">
<div id="slideshow">
<ul class="rslides">
<li><img align="middle" alt="Slider Title" class=
"active" src="/root/img/sliders/1-1.jpg"></li>
<li><img align="middle" alt="Slide 2" class="active"
src="/root/img/sliders/2-1.jpg"></li>
</ul>
</div>
<section>
<div class="intro">
<p>Welcome to my gallery! This is a collection of
images from my small trips to break clear away from
daily routines of life. Some very special memories are
captured and exhibited here to share with friends and
family. To me, portraying nature often is not a matter
of intellect but of feelings. Hope you walk away from
these images with inspiration and love for nature.</p>
<div class="underline"></div>
</div>
</section>
</div>
</article>
</div>
<div class="footer">
<div id="seeker">
<form accept-charset="utf-8" action="/root/photos/search" id=
"PhotoCmspageForm" method="get" name="PhotoCmspageForm">
<input id="search" name="search" type="text" value=
""><input id="find" type="submit" value="Search">
</form>
</div>
<p class="footnote">Copyright © 2014 rajeevthomas.com</p>
</div>
</body>
</html>
My current CSS is
/* CSS Document */
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,font,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 {
margin:0;
padding:0;
border:0;
font-size:100%;
/*Color for all website fonts--@added By Rajesh Kumawat*/
color:#8d643d;
}
blockquote,q {
quotes:none;
}
blockquote:before,blockquote:after,q:before,q:after {
content:'';
content:none;
}
ins {
text-decoration:none;
}
del {
text-decoration:line-through;
}
table {
border-collapse:collapse;
border-spacing:0;
}
body {
background:#FFF;
width:90%;
margin: 0 auto;
}
img{
max-width:100%;
height:auto;
}
a {
text-decoration:none;
}
a:visited {
padding:0 2% 0 2%;
text-decoration:none;
}
a:hover,a:focus {
text-decoration:none;
color:#fff;
}
a,input {
outline-color:invert;
outline-style:none;
outline-width:medium;
}
.clearfix:before,
.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
/*--[if lt IE 8]--*/
/* For IE < 8 (trigger hasLayout) */
.clearfix {
zoom:1;
}
.nav {
width:100%;
text-align :right;
padding:0 0%;
list-style:none;
position:relative;
z-index:10;
margin-right:0px;
}
.nav li {
position:relative;
display:inline-block;
padding : 1px;
border-radius : 4px;
}
.nav > li:hover > a{
background-color : #5c331a;
}
.nav li a:hover {
color:#FFF;
}
.submenu > li:hover > a{
background-color : #5c331a;
}
.nav li a {
display:inline-block;
padding:0px 0px;
text-decoration:none;
color:#8d643d;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:12px;
}
#submenu.submenu {
display: none;
padding: 5px 0;
position: absolute;
z-index : 9999;
}
#submenu.submenu > li a{
width : 100%;
text-align : center;
z-index : 9999;
}
#submenu.submenu > li {
list-style: outside none none;
width : 100%;
z-index : 9999;
}
.nav > li:hover ul#submenu{
display: block;
}
#slideshowContainer{
width:80%;
margin:0 auto;
height:100%;
}
#slideshow{
width:100%;
margin:0 auto;
padding:0% 1%;
height:100%;
}
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width:100%;
padding: 0;
margin: 0 ;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides li:first-child {
position: relative;
display: block;
float: left;
}
.rslides img {
display: block;
height: auto;
float: left;
width: 100%;
border: 0;
}
.intro {
font-family:“Lucida Grande”, sans-serif;
color:#DB814C;
font-size:17px;
text-align:center;
margin:0 auto;
line-height:22px;
border-top:1px solid #8a3e1c;
width:90%;
padding:2% 2% 0 2%;
}
.underline {
position:relative;
margin:0 auto;
z-index:1;
padding:35px 0 0;
background-image:url(../img/underline.png);
background-repeat:no-repeat;
background-position:center bottom;
text-align:right;
width:220px;
}
.footer{
margin:0 auto;
text-align:center;
padding:2% 2% 0 2%;
clear:both;
}
Is there a way to fix this without depending on trimming the images? I am curious. Or is it not encouraged to do so in responsive designs?
