#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

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!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.