[Pro] Disabling Parallax Effect on Tablet

Freeway
1

I am using Parallax on a Freeway site but it doesn’t work properly on tablets (look at this on a tablet not a phone as we have a redirect to a mobile-specific version for phones).

On my iPad, the second image is cut off on the homepage: Blue Iceberg Ada | Home

On two other pages, the parallax image doesn’t appear at all:
http://www.blue-iceberg.com/ada/solutions.html
http://www.blue-iceberg.com/ada/casestudies.html

On the About Us page the parallax image appears properly (without parallax):
http://www.blue-iceberg.com/ada/aboutus.html

Finally, on Contact Us the image is messed up:
http://www.blue-iceberg.com/ada/contact.html

You can compare what it should look like if you look at it on a laptop or desktop computer.

I set it up in Freeway by putting this HTML markup on the master page Before :

.parallax { /* The image used */ background-image: url("Resources/bg1.jpeg"); /* Set a specific height */ min-height: 472px; /* Create the parallax scrolling effect */ background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: 100%; }

(I had iterations for parallax2, parallax3, etc. with different background-image: urls)

Then, to call the image on each page, I inserted an HTML markup box with this:

changing “parallax” to match the class for each image (I’m not pasting all the code as it’s long).

Is there an easy way to set it so the parallax effect is disabled when on a tablet-- or to fix this so it works?

Thanks in advance.

Richard.

http://www.blue-iceberg.com/ada/

freewaytalk mailing list
email@hidden
Update your subscriptions at:

2

Richard,

By default background-attachment: fixed; does not work in iOS. You’ll may need javascript to do this.

Or have a look at this Codepen for a iOS work around/fix for background attachment fixed … https://codepen.io/gentlemedia/pen/JJEzwO

David Owen { Freeway Friendly Web hosting and Domains }

http://www.ineedwebhosting.co.uk | http://davidowendesign.com

On 11 Jan 2018, at 18:39, Richard Cacciato email@hidden wrote:

I am using Parallax on a Freeway site but it doesn’t work properly on tablets (look at this on a tablet not a phone as we have a redirect to a mobile-specific version for phones).

On my iPad, the second image is cut off on the homepage: http://www.blue-iceberg.com/ada/

On two other pages, the parallax image doesn’t appear at all:
http://www.blue-iceberg.com/ada/solutions.html
http://www.blue-iceberg.com/ada/casestudies.html

On the About Us page the parallax image appears properly (without parallax):
http://www.blue-iceberg.com/ada/aboutus.html

Finally, on Contact Us the image is messed up:
http://www.blue-iceberg.com/ada/contact.html

You can compare what it should look like if you look at it on a laptop or desktop computer.

I set it up in Freeway by putting this HTML markup on the master page Before :

.parallax { /* The image used */ background-image: url("Resources/bg1.jpeg"); /* Set a specific height */ min-height: 472px; /* Create the parallax scrolling effect */ background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: 100%; }

(I had iterations for parallax2, parallax3, etc. with different background-image: urls)

Then, to call the image on each page, I inserted an HTML markup box with this:

changing “parallax” to match the class for each image (I’m not pasting all the code as it’s long).

Is there an easy way to set it so the parallax effect is disabled when on a tablet-- or to fix this so it works?

Thanks in advance.

Richard.

http://www.blue-iceberg.com/ada/

freewaytalk mailing list
email@hidden
Update your subscriptions at:
Information for existing FreewayTalk / Groups.io users - Site Feedback - Softpress Talk

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options