Search code examples
cssanythingslider

Anythingslider causing width problems


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!


Solution

  • 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;
    }