-1

the slider is located here bxslider location

The slide picture has 652px. This means that i should be able to fit in 4 thumbnail pictures in a row under it each with 163px, somehow the 4 thumbnail picture add up to 653px. Why?

user2997903
  • 9
  • 5
  • 2
    Post all relevant JS, HTML and CSS code in your post. Links to external resources may break over time and nobody in the future would be able to benefit from this question. – Ennui Nov 15 '13 at 21:28

2 Answers2

1

The problem begins with this container:

<div class="small-12 large-8 columns no-padding-left" role="slider">

Who has the width set to 66.66667% ... That % acordding with the Google developer tools is 651.656px then you can't take this value as 652px.

What you can do is set the width to the a tag:

.bx-pager a{
   width:25%;
}

And for the img :

#bx-pager img {
   width:100%;
}
DaniP
  • 37,813
  • 8
  • 65
  • 74
0

The width of the parent div is actually 651.656px x 214px. So the large slide picture is 652px, which is just slightly larger than the actual size.

The 4 smaller pictures will add up to be 652px and thus move the 4th one to the next row.

If you wanted the 4 thumbnail pictures to be on the same row, then you shouldn't use width: 66.66667% under class .large-8. Also, by changing the horizontal size of the browser, it will move your image slider to the next line and cause your sidebar to stretch. Having something like:

#sidebar {
    max-width: 333px;
}

could prevent that as well as allow it to change widths if the screen gets to a certain point.

bunndan
  • 2,717
  • 3
  • 18
  • 20