Search code examples
cssbxslider

BXslider full screen (reszing browser's window causes visual bugs)

I've found great advice by @Bojan Petkovski how to make a bxslider full screen:

Making BXslider full screen (filling entire browser window)

But I've encountered a problem running bxslider with parallax effect and few JS scripts (enquire, skollr). I think that they produce the problem. But I could be wrong.

Here is the website: http://tedxmru.com/

Once the browser's window is resized to it's smallest(making it narrow) width the slides doesn't resize proportionally.

As I've tested and if I'm not wrong this rule isn't working on resize:

.bxslider, .bxslider li{
    height: 100% !important;;
}

Second problem once the window is narrowed and I hit refresh - the slider disappears, while I haven't written any media queries to hide it.

Need help fixing it with resize issues

Solution

  • Try this:

    .bxslider, .bxslider li{
   height: 100vh !important;
}

    I tried it using developer tools on your site and it appears to be working. At least for resizing the slides.