Template Too Wide for Mobile - Horizontal Overflow

[William]

Is there a trick for finding the cause of a template's horizontal scroll bar on mobile devices?

For example in 360 x 640 resolution:




Any help would be appreciated!

Thanks,
William

[glennrocksvb]

That is a tricky issue to find. You literally have to navigate through the HTML DOM tree in the element inspector tool to find which element is causing it.

[glennrocksvb]

I think I found it. You have this in css_additional:

#channel-tabbar {
    background: none!important;
    margin-left: 55px;
}

I think you only wanted that left margin (and that background:none) on desktop but not on mobile. If so, then:

[COLOR=#FF0000].l-desktop [/COLOR]#channel-tabbar {
    background: none!important;
    margin-left: 55px;
}

[William]

I found two css additions that were causing the overflow. I ended up blanking out my additional_css and just adding parts of the custom code back until I narrowed down where the overflow was coming from. I guess you could say I used a process of elimination

For example, when I added lines 1-250 back the overflow was there. It didn't take many seconds before I saw the first line causing the overflow.

I didn't know if there was an easier way to find these issues in the future.

Thank you Glenn,
William

[glennrocksvb]

You're welcome. And thanks as always.

Btw, you don't want the blue background on the nav bar with the 3 horizontal bar or hamburger icon on mobile? That icon is not noticeable with the gray background behind it.