After I put in Anythingslider into my webpage, after I tried to adjust the width of the slideshow to match the page, the page ends up like this -> https://i.sstatic.net/6kpcc.png I've tried messing with Anything slider CSS, and my own yet I'm not too sure what I can do. Any ideas?
HTML:
<div id = "bodyContent-container">
<div id = "bodyContent">
<div id = "bands-container">
<div id = "bands">
<img src="images/slide.jpg" width="960" height="300"/>
<img src="images/slide-2.jpg" width="960" height="300" />
<img src="images/slide-3.jpg" width="960" height="300"/>
</div>
</div>
</div>
</div>
CSS:
div#bodyContent-container {
width:100%;
height: 100%;
min-height:1200px;
background:#f3f3f3;
margin: 0 auto;
padding: 0;
}
div#bodyContent {
width:960px;
height:100%;
min-height:1200px;
margin: 0 auto;
padding: 0;
-webkit-box-shadow: 6px 0px 10px -7px #888, -6px 0px 10px -7px #888;
-moz-box-shadow: 6px 0px 10px -7px #888, -6px 0px 10px -7px #888; /* Firefox 3.6 and earlier */
box-shadow: 6px 0px 10px -7px #888, -6px 0px 10px -7px #888;
padding-top: 250px;
}
div#bands-container {
width: 960px;
height:300px;
margin: 0 auto;
padding: 0;
}
div#bands {
width: 960px;
height: 300px;
margin: 0 auto;
padding-right: 30px;
}
Website page: http://andrewgu12.kodingen.com/graphicDesign Thanks!
You most edit here : Minimalist Round theme
orginal :
/******************
SET STYLING HERE
******************
=================================
Default state (no keyboard focus)
==================================*/
/* Overall Wrapper */
.anythingSlider-minimalist-round {
margin: 0 auto;
/* 30px right & left padding for the navigation arrows */
padding: 0 30px;
}
to :
/******************
SET STYLING HERE
******************
=================================
Default state (no keyboard focus)
==================================*/
/* Overall Wrapper */
.anythingSlider-minimalist-round {
margin: 0 auto;
/* 30px right & left padding for the navigation arrows */
padding: 0;
}