Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
NB1986

Parallax - Disabling code injection on Mobile

Question

Posted (edited)

Hi All,

I am struggling with Parallax on mobile and I wanted to know if there is a line of code I can insert in the header code injection that will enable me to keep the effect on desktop versions of the site.

Site in question : www.nicolebarton.co.ukSite Style: Bedford

You can see on the mobile version I am getting bars appear on the top / bottom when viewed in the mobile format.

I have copied my Parallax code below, which sits in Settings>Advanced>Code Injection


<!-- 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: -3,
       center: true
     });
   }
 });
</script>
<!-- end Parallax -->

Ideally this would be a few lines of code at the end that states if a page is 640px wide then it will disable this particular piece of code.

Any help greatly appreciated!

Edited by NB1986

Share this post


Link to post

1 answer to this question

Recommended Posts

  • 0

If anybody knows of a few lines of code which say *Disable this script if screen size is 640px wide it would be very much appreciated!

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...