Mobile scrolling

passtheclassorg · Member · Aug 19, 2018 at 2:05 pm
Copy link

Add topic to favorites
On my website the background stays still and the content scrolls separately on a desktop; however, on mobile the background scrolls to making the majority of the page just blank space, how can I fix this? You can see at passtheclass.org

The blog I need help with is: (visible only to logged in users)
yashitamittal · Member · Aug 20, 2018 at 9:26 am
Copy link
Hi there,

I see the following CSS on your website to achieve the fixed background effect:
```
.site-content {
    background-image: url(https://i.imgur.com/3nE22VQ.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 700px;
}
```
The background-attachment: fixed; works perfectly on mobile but this property has issues when it comes to mobiles. Unfortunately, mobile browser support for background-attachment: fixed is pretty poor.

This is the reason that it is not coming up properly for you on mobiles.
passtheclassorg · Member · Aug 20, 2018 at 11:10 pm
Copy link
Is there any way I can make it so that on mobile the background is fixed and on the pages where content takes up more than a full screen the scrolling moves only the content and not the background?
yashitamittal · Member · Aug 21, 2018 at 5:03 am
Copy link
First of all, I would like to correct my above statement. I typed incorrectly:

The background-attachment: fixed; works perfectly on large screens but this property has issues when it comes to mobiles. Unfortunately, mobile browser support for background-attachment: fixed is pretty poor.

Is there any way I can make it so that on mobile the background is fixed
and
and on the pages where content takes up more than a full screen the scrolling moves only the content and not the background?
Both these statements mean that you want fixed background effect which is used to create parallax scrolling effect.

But, parallax scrolling does not always work on mobile devices/smart phones.
On this page, they have shown demo for parallax scrolling effect. If you will open the demo page on mobile, you will notice that parallax scroll is not working.

And they suggest disabling this feature for mobiles. The fixed and scroll values are supported everywhere, although fixed can behave strangely on mobile.

I can see that you have improved your mobile page for the website and it looks better now. The buttons are now distributed evenly and look nice.

Hope this clears the confusion :)

No items found.