I am experiencing an issue with my jQuery banner not shrinking properly. In my mobile.css file, I have set the class .banner width to 100%, but it is not shrinking to a width of 260px as expected. I would like to know which property I need to use in order to achieve this. You can check out the hosted version on the web server by clicking on this link:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="slider/css/skitter.styles.css" type="text/css" media="all" rel="stylesheet" />
<script src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" language="javascript" src="slider/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" language="javascript" src="slider/js/jquery.skitter.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('.box_skitter_large').skitter({
theme: 'clean',
numbers_align: 'center',
progressbar: true,
dots: true,
preview: true
});
});
</script>
</head>
<body>
<div class="banner">
<div class="border_box">
<div class="box_skitter box_skitter_large">
<ul>
<li><a href="#cubeRandom"><img src="slider/images/example/1.jpg" class="circles" /></a><div class="label_text"><p>One</p></div></li>
<li><a href="#block"><img src="slider/images/example/2.jpg" class="circles" /></a><div class="label_text"><p>Two</p></div></li>
<li><a href="#cubeRandom"><img src="slider/images/example/3.jpg" class="circles" /></a><div class="label_text"><p>Three</p></div></li>
...
</ul>
</div>
</div>
</div>
<!--End of banner-->
</body>
</html>
My default css:
body {
/*background-color:#F2F2F2;*/
background-color: #FFF;
padding: 0px;
margin: 0px;
font-weight: normal;
font-family: Arial;
}
...
.my mobile.css:
@media only screen and (max-width:530px)
{
#wrapper
{
width:260px;
}
.header
{
width:260px;
height:auto;
}
.logo
{
width:260px;
height:90px;
text-align:center;
}
.banner
{
width:100%;
}
.banner img
{
width:100%;
height:100px;
}
}