Parallax - Disabling code injection on Mobile

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!

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!

Hey, NB - did you ever get an answer to this? I'm actually struggling with the opposite problem: I want to turn parallax banner images ON for my blog posts, but the Brine template doesn't support it so I'm having to use code injection as well. And even then, I'm not sure the script I have is the most efficient and it doesn't do anything with the parallax. Any thoughts?

I'll also keep an eye out for a solution to your problem.

JB

I did not try this and i was searching for something else, so idk if it will work, but I had do a similar thing for some headers, I wanted them to change with the screen size but only after a certain point. I used the following code

@media (max-width: 480px) {
  h4 {
    font-size: 14vw;
  }
}

Anything within @media will only take effect if the condition stated is met (could use min-width too). So in this case h4 will have a font size of 14vw when the media window is between 0-480, using min width would set the lower bound. 

so I wonder if that would be something you could add to the script or something, maybe hide all of this in a @media? Just thinking here, could be totally wrong