CODEWITHSUNDEEP
bordermarginbxslider
nick
nick

Reputation: 11

BxSlider white space

I am new to html/css/javascript and am trying to add an image slider using BxSlider to my website. I am having an issue when the slider expands to a certain size it starts adding a white edge. Is this because the images have reached their maximum width? Or do I need to change something in the code?

My images and slider are in a div with id of wrapper. The css is:

#wrapper {
    max-width: 70%;
    margin: auto;
    padding: 0 %;
    padding-top: 4%;

}

and have css for img as

img {
    max-width: 100%;
    padding: none;
}

Thanks!

Upvotes: 1

Views: 1029

Answers (1)

MaSlo
MaSlo

Reputation: 81

Although you have not included enough information to simply answer yes/no to your question (ie. dimensions of the source images and the containing element), I would say that you are right.

A quick test on bxSlider homepage - increasing the width of div.home-slider-wrapper above 1000px (which is width of their source images) caused a white border on the right. See annotated screenshot.

Try changing CSS for the images from max-width: 100% to width: 100% if it works for you (removes the white border at the cost of proportional stretching the images).

Upvotes: 2

Related Questions