Blog template scroll/load problem

SOLVE
Highlighted
New Contributor

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...

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Highlighted
Esteemed Contributor | Elite Partner

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):

Screen Shot 2019-11-28 at 11.58.10 PM.png
which is a known issue with jQuery 1.7

Alyssa Wilie
Web Developer
LyntonWeb

Alyssa Wilie

Web Developer at LyntonWeb

If this answer solved your question, please mark it as the solution!

Reply
0 Upvotes
7 Replies 7
Highlighted
Esteemed Contributor | Elite Partner

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

Alyssa Wilie

Web Developer at LyntonWeb

If this answer solved your question, please mark it as the solution!

Highlighted
New Contributor

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!

Reply
0 Upvotes
Highlighted
Esteemed Contributor | Elite Partner

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?

Screen Shot 2019-11-28 at 10.14.16 PM.png

Alyssa Wilie
Web Developer
LyntonWeb

Alyssa Wilie

Web Developer at LyntonWeb

If this answer solved your question, please mark it as the solution!

Reply
0 Upvotes
New Contributor

@amwilie I changed it back to 1.7.x, saved, then back to 1.11.x, saved.jquery_1.11.png

 

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."

Unknown.png

 

Reply
0 Upvotes
Highlighted
Esteemed Contributor | Elite Partner

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):

Screen Shot 2019-11-28 at 11.58.10 PM.png
which is a known issue with jQuery 1.7

Alyssa Wilie
Web Developer
LyntonWeb

Alyssa Wilie

Web Developer at LyntonWeb

If this answer solved your question, please mark it as the solution!

Reply
0 Upvotes
Highlighted
New Contributor

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.

Reply
0 Upvotes
Highlighted
Esteemed Contributor | Elite Partner

Glad it all worked out!

 

Alyssa Wilie

Web Developer

LyntonWeb

Alyssa Wilie

Web Developer at LyntonWeb

If this answer solved your question, please mark it as the solution!

Reply
0 Upvotes