topic Re: Blog template scroll/load problem in CMS Development

Blog template scroll/load problem

rquinn — Wed, 27 Nov 2019 21:13:44 GMT

I purchased the Awaal blog template from the hubspot marketplace. When the page loads, the browser thinks the hero section is the whole page and doesn't scroll down. Then if I scroll again, I can see the rest of the page. Also, this behavior happens anywhere on the page if I change scroll directions. If I stop scrolling and then scroll the other way, the page thinks what's on the screen is the entire page unless I stop and scroll again.

I've tested in chrome, safari, and firefox. All have this same problem.

Hubspot support suggested there could be conflicting JS on the page but couldn't resolve the issue. They suggested I post the problem here. Thanks in advance for your help!

This is the blog template so far: https://preview.hs-sites.com/_hcms/preview/template/multi?blog_listing=true&content_group_id=null&is_buffered_template_layout=true&portalId=4045567&tc_deviceCategory=undefined&template_layout_id=19583705599&updated=1572555965287

Re: Blog template scroll/load problem

alyssamwilie — Thu, 28 Nov 2019 01:45:48 GMT

It looks like in the Awwal_Blog_Template stylesheet it has overflow-x: hidden set on html and body. I removed it using the browser inspector and the scrolling stopped behaving oddly.

So, look for this piece of code in the stylesheet

html, body {
    min-height: 100%;
    margin: 0;
    padding: 0;
    max-width: 100%;
    overflow-x: hidden;
}

and remove overflow-x: hidden; from it.

Also, I'm seeing some jQuery errors in the console. Your site looks to be running 1.7.x. If you go to Settings > Website > Pages and scroll down to jQuery; change the jQuery version to 1.11.x. It may be 1.7.x is incompatible with the theme.

Alyssa Wilie

Web Developer
LyntonWeb

Re: Blog template scroll/load problem

rquinn — Thu, 28 Nov 2019 14:51:00 GMT

Hi Alyssa, thanks for your response! I updated jQuery version to 1.11.x and removed

    overflow-x: hidden;

but this didn’t fix the scroll issue I’m seeing. Also, the featured blog slider at the top of the page works when I preview the blog but it doesn’t when I make the blog live. It just stays on the first image. It doesn’t auto scroll and it doesn’t manually scroll if I click the arrows.

FYI I've made the blog live so it's easier to check out. This is where you can find the live version after I updated jQuery and removed overflow-x: hidden;

https://blog.brightguest.com/

Please let me know if you have any other suggestions. Thanks!

Re: Blog template scroll/load problem

alyssamwilie — Fri, 29 Nov 2019 04:20:54 GMT

Hey @rquinn

I'm actually still seeing the overflow: hidden in the styles and jquery 1.7 being used. Can you update again just so I can see if it had any effect on the errors in the console I'm seeing?

Alyssa Wilie
Web Developer
LyntonWeb

Re: Blog template scroll/load problem

rquinn — Fri, 29 Nov 2019 05:21:32 GMT

@alyssamwilie I changed it back to 1.7.x, saved, then back to 1.11.x, saved.

I reached out to the dev for this template and they said, "...it's not a CSS related issue. Your jQuery is conflicting with the template. If you look at the browser console you can see the jQuery error. I'm pretty sure this is the main reason you're getting two scroll bars in your template. Take a look at the screenshot below."

Re: Blog template scroll/load problem

alyssamwilie — Fri, 29 Nov 2019 06:23:18 GMT

The scrollbar is working just fine for me now with the overflow: hidden; gone.

However you still have the issue of the carousel not working.
Is it possible the 1.7.x is built into the template because I'm still seeing it in the page. The 'error' they're pointing out is actually just a 'warning' they're seeing because they have content blocking enabled (as noted in the warning above that) because that script is for Hubspot analytics. It wouldn't have any effect on a carousel. This is the error I'm seeing on my end (in red):

which is a known issue with jQuery 1.7

Alyssa Wilie
Web Developer
LyntonWeb

Re: Blog template scroll/load problem

rquinn — Fri, 29 Nov 2019 15:28:18 GMT

Turns out I wasn't specifying the domain when updating to JQuery 1.11.x. Now I see that everything is working. Thanks for your help! Happy TG.

Re: Blog template scroll/load problem

alyssamwilie — Fri, 29 Nov 2019 23:04:27 GMT

Glad it all worked out!

Alyssa Wilie

Web Developer

LyntonWeb