Streaming live at 10am (PST)

Mobile version of homepage wouldn't scroll


#1

Hi!

My webpage won’t scroll on the homepage in the mobile version.

I have fullpage.js activated on the homepage

https://www.audreyma.co.uk/

Read-Only Link:

[1] https://preview.webflow.com/preview/audreys-first-project-be6f23?preview=268615aa3c063eacfec94f5b37215dd6

Would be great to have some help/advice! Much appreciated


#2

Hi @audrette,

Looks like your ‘fullpage’ section is set to hide in mobile portrait, which prevents this section to be displayed in mobile.

It also seems these settings are being used on several sections of your website:

Once you remove these settings, the page should then display all elements and scroll as expected.

Hope this helps :slight_smile:


#3

Hi @audrette,

@Nita and I are tag-teaming today :blush:

I was also able to take a look at your project, and noticed that errors were showing in the Console as there were multiple instances of the JS library being referenced (site-wide, and on the page)

Feel free to remove the custom code that has been added to the page as the site-wide instance will work.

CloudApp


#4

Hi all, :slight_smile:
thank you so much for the quick responses! I really really appreciate it.

The reason why fullpage is hidden on mobile version, is because the plugin js I used from alvaro trigo for presentation like scrolling doesn’t work very well on mobile screens.

Hence I created a mobile-only DIV called MOBILE so the format looks different on your mobile!!

I was wondering in that case, how do I keep the two separate formats but fix the scrolling bug for the mobile version?


#5

Hi @audrette,

An easier implementation would be to disable fullpage.js for mobile devices.

The following code is how it can be completed:
<script> if (screen && screen.width > 768) { document.write('<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.2/fullpage.min.js"><\/script>'); } </script>

You can view this implementation at the following URLs:
Live site - http://audreys-first-project-fullpage-js.webflow.io/
Preview link - https://preview.webflow.com/preview/audreys-first-project-fullpage-js?preview=8021b830bcdaba9f3e2dbeb9b7a37026

Hope this helps :blush: