CMS Development

rquinn
Miembro

Blog template scroll/load problem

resolver

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

0 Me gusta
1 Soluciones aceptada
alyssamwilie
Solución
Experto reconocido | Partner nivel Elite
Experto reconocido | Partner nivel Elite

Blog template scroll/load problem

resolver

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

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

Alyssa Wilie Profile Image

Alyssa Wilie

Web Developerat Lynton

Learn HubL | Get Marketing Insights

HubSpot Elite Solutions Partner
Lynton's HubSpot theme Rubric now available. Click to download.

Ver la solución en mensaje original publicado

0 Me gusta
7 Respuestas 7
alyssamwilie
Experto reconocido | Partner nivel Elite
Experto reconocido | Partner nivel Elite

Blog template scroll/load problem

resolver

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

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

Alyssa Wilie Profile Image

Alyssa Wilie

Web Developerat Lynton

Learn HubL | Get Marketing Insights

HubSpot Elite Solutions Partner
Lynton's HubSpot theme Rubric now available. Click to download.
rquinn
Miembro

Blog template scroll/load problem

resolver

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!

0 Me gusta
alyssamwilie
Experto reconocido | Partner nivel Elite
Experto reconocido | Partner nivel Elite

Blog template scroll/load problem

resolver

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

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

Alyssa Wilie Profile Image

Alyssa Wilie

Web Developerat Lynton

Learn HubL | Get Marketing Insights

HubSpot Elite Solutions Partner
Lynton's HubSpot theme Rubric now available. Click to download.
0 Me gusta
rquinn
Miembro

Blog template scroll/load problem

resolver

@alyssamwilie 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

 

0 Me gusta
alyssamwilie
Solución
Experto reconocido | Partner nivel Elite
Experto reconocido | Partner nivel Elite

Blog template scroll/load problem

resolver

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

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

Alyssa Wilie Profile Image

Alyssa Wilie

Web Developerat Lynton

Learn HubL | Get Marketing Insights

HubSpot Elite Solutions Partner
Lynton's HubSpot theme Rubric now available. Click to download.
0 Me gusta
rquinn
Miembro

Blog template scroll/load problem

resolver

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.

0 Me gusta
alyssamwilie
Experto reconocido | Partner nivel Elite
Experto reconocido | Partner nivel Elite

Blog template scroll/load problem

resolver

Glad it all worked out!

 

Alyssa Wilie

Web Developer

LyntonWeb

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

Alyssa Wilie Profile Image

Alyssa Wilie

Web Developerat Lynton

Learn HubL | Get Marketing Insights

HubSpot Elite Solutions Partner
Lynton's HubSpot theme Rubric now available. Click to download.
0 Me gusta