CSS Scrolling with 100% width?

Question

Hey I have a problem with my website http://www.probeast-network.com/index.php

When you visit the site you'll be able to see a width of 100%, however, as soon as you start resizing the window you will see that the image which is set to width 100% doesnt change at all. I tried multiple things, however, I cant seem to figure it out. It might have something to do with the jquery slider, but this never caused any problems before. Here is the code

Script code:

<script type="text/javascript">
$(document).ready(function() {
$('.slider').each(function(ware) {
    $(this).cycle({
        timeout: 80000,
        speed:   400,
        sync:    false,
        pager:  '.pager',
        pagerAnchorBuilder: function(i) {
            if (ware == 0)
                // for first slideshow, return a new anchro
                return '<a href="#">'+(i+1)+'</a>';
            // for 2nd slideshow, select the anchor created previously
            return '.pager a:eq('+i+')';
        }
    });
});
});
</script>

HTML code:

<div id="pos">
  <div class="pager"></div>

  <div class="slider"
  data-cycle-slider="> div"
  >

  <div class="size"><img class="imgsize" src="<?php echo $bild_giveaway;?>" alt=""/></div>

  <div class="size"><img class="imgsize" src="<?php echo $bild_video;?>" alt=""/></div>

  <div class="size"><img class="imgsize" src="<?php echo $bild_promine ?>" alt="" /></div>

  <div class="size"><img class="imgsize" src="<?php echo $bild_checkout ?>" alt="" /></div>

  <div class="size"><img class="imgsize" src="<?php echo $bild_tips ?>" alt="" /></div>

  </div>

  <div class="slider"
  data-cycle-slider="> div"
  >

  <div class="size1"></div>  

  <div class="size2"></div>

  <div class="size3"></div>

  <div class="size4"></div>

  <div class="size5"></div>

  </div>

</div>

CSS code:

#pos {
position: relative;
width: 100%;
z-index: 2;
margin: 0px auto;
}

.imgsize {
position: absolute;
width: 100%;
left: 0%;
}

.slider {
width: 100%;
z-index: -95;
text-align: center;
margin: 0px auto;
position: absolute;
top: 0px;
opacity: 1;
}

.size {
position: absolute;
min-width: 1290px;
margin: 0px auto;
right: 0%;
z-index: -14;
-webkit-box-shadow: 0px 0px 46px 5px;
box-shadow: 0px 0px 46px 5px;
width: 100%;
min-height: 784px;  
}

If somebody knows a solution to this problem, please let me know. I have been troubleshooting for 6-7 hours now.. :(

Sincerely, Jan Breuer

Answer 1

Looks like the div with class .slider , has some inline css set to it. More specifically it's width and height are set to 1290px and 784px respectively.

Answer 2

Most of your elements (.bottom, .lastline, .imagesheader, .menudiv, .....) get, a min-width set to 1290px remove all the min width if you want the width "not scrolling"

Also your slider have a width set by javascritp so either you able to cancel the javscript function making the slider get a specific width either you cancel it with the css with the code below.

.slider {
    width: 100% !important;
}

Same for the class .size which get both the min width and the width set by javascritp.