#fixBruneiWebsites : Telbru’s horizontally scrolling website

As part of the #fixBruneiWebsites movement, we took a look at the Telbru website https://www.telbru.com.bn/ which had some weird horizontal scrolling as I found out and mentioned in this tweet

Looks like @telbru_bn has some weird side-scrolling behaviour. Going to be a possible #fixbruneiwebsites candidate for next week's #BruneiGeekMeet 😀https://t.co/9VXVzdwsQA pic.twitter.com/TymXBFu4CM

— Timothy Lim (@TheWheat) November 17, 2018

The Problem

• Continuing to scroll down when at the bottom of the page seems to do a horizontal scroll
• In fact, it is even possible to scroll horizontally even if there is no actual real content visible

The Solution

• Adding the following CSS definition

.owl-wrapper { 
    max-width: 100%;
}

The Investigation

Note: I’m using Chrome dev tools as I typically use Chrome but other browser should have similar functionality

• Open up the Chrome dev tools and head over to the “Elements” section to view the rendered HTML code on the page
• Start deleting elements in the BODY until the problem stops happening

• We found that the testimonial-container seems to be the cause of the problem

• Expanding the elements the elements we see that a owl-wrapper div has a width of 3300pxwhich seems suspicious 

• Setting a max-width: 100% seems to fix the problem 

• So adding a custom style of max-width: 100% on the .owl-wrapper looks to be the solution we want!

I believe that should fix the problem! 🚀

Moving on from here, perhaps we could looking a bit more into what is creating this owl-wrapper in the first place: e.g. is it a library that just needs proper configuration or is there an actual bug in the library. But that would possibly be something for another day!