orourkedevon Posted October 26, 2019 Share Posted October 26, 2019 Hi, does anyone know if you can disable custom code for mobile only? I have added the below code to enable parallax scrolling, but it is causing an error on mobile where the banner has a small black section on top before the banner image begins. Hoping there is a way to disable this code on mobile only so parallax scrolling works on desktop web at least. Here is the page: https://www.fluviomarketing.com/ <!-- Parallax --> <script src="https://cdnjs.cloudflare.com/ajax/libs/rellax/1.6.2/rellax.min.js"></script> <script> document.addEventListener('DOMContentLoaded', function() { var targets = '.banner-thumbnail-wrapper #thumbnail img, .index-section #thumbnail img, .index-section:first-child .slide .thumb-image'; if (document.querySelector(targets)) { var rellax = new Rellax(targets, { speed: -6, center: true }); } }); </script> <!-- end Parallax --> Link to comment
brandon Posted October 27, 2019 Share Posted October 27, 2019 Hello. Consider adding a link to the site/page in question. That often helps others diagnose the issue then write and test solutions. If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' (top-left) Link to comment
orourkedevon Posted October 27, 2019 Author Share Posted October 27, 2019 Thanks, Brandon. Just added the site link: fluviomarketing.com. Link to comment
orourkedevon Posted October 29, 2019 Author Share Posted October 29, 2019 I made an adjustment to not center the image, which removed the small black space on top of the banner (although it doesn't scale the image when dragged causing another issue). Ideally, I'd like to disable the CSS on mobile all together. Below is the code - any guidance would be much appreciated! <!-- Parallax --> <script src="https://cdnjs.cloudflare.com/ajax/libs/rellax/1.6.2/rellax.min.js"></script> <script> document.addEventListener('DOMContentLoaded', function() { var targets = '.banner-thumbnail-wrapper #thumbnail img, .index-section #thumbnail img, .index-section:first-child .slide .thumb-image'; if (document.querySelector(targets)) { var rellax = new Rellax(targets, { speed: -6, center: false }); } }); </script> <!-- end Parallax --> Link to comment
gancay Posted March 16, 2020 Share Posted March 16, 2020 Hello, did you found a solution ? I have the same problem. Link to comment
apothecarieartistique Posted April 22, 2020 Share Posted April 22, 2020 Same problem here. I want to use code like this: parallax scrolling in 7.1 , but only on desktop. On this site: apothecarie artistique Thank you! Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.