I am currently developing a site for a client and have used your parallax on a number of pages and it looks awesome on desktop.
However on mobile and ipad the SOS background graphic is not responsive:
christydev.hungdesign.com.au
Can you please help me to fix it. I would rather not have it at all than the weird crop.
Thank you!
gab

Thanks for writing in.

Parallax is intentionally disabled for mobile for performance purposes.

This is the coding responsible for that.

And it’s set to $(element).css('background-attachment', 'scroll'); when the devices is touch enabled. It prevents parallax effect.

xData.api.map('content_band', function(element, params) {
  jQuery(window).load(function() {

    if ( params.parallax ) {
      if ( Modernizr.touch ) {
        $(element).css('background-attachment', 'scroll');
      } else {
        if ( params.type === 'image'   ) speed = 0.1;
        if ( params.type === 'pattern' ) speed = 0.3;
        if ( speed ) $(element).parallaxContentBand('50%', speed);
      }
    }

    if ( params.type === 'video' ) {
      var BV = new jQuery.BigVideo();
      BV.init();
      if ( Modernizr.touch ) {
        BV.show(params.poster);
      } else {
        BV.show(params.video, { ambient : true });
      }
    }

  });
});

If you still wish to implement that, then you must edit this file wp-content\plugins\x-shortcodes\js\dist\site\x-shortcodes-body.min.js

Replace this code :

n.parallax&&(Modernizr.touch?t(e).css("background-attachment","scroll")

by this one :

n.parallax&&(false?t(e).css("background-attachment","scroll")

Save and upload your edited file.

Hope this helps.

To replace your background image on mobile or smaller screens, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

@media (max-width: 979px){
    div#x-content-band-2 {
        background-image: url('http://placehold.it/1200x650') !important;
    }
}

The background image size is set to cover. It means to scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area. Having it this way, you can avoid having blank spaces surrounding your background image.

For more details, please check http://www.w3schools.com/cssref/css3_pr_background-size.asp

Hope this helps.

P

The suggestion about uses an old version of the theme. Currently, X detects touch devices and turns the parallax effect by default. We always love to get feedback so we will write down a note that some people might want to keep it activated on a tablet or mobile and we might add it in a future release if there is enough demand for it.

You can try to add this code in the CSS customizer:

@media (max-width: 979px) {
    .touch .x-content-band.bg-image.parallax, .touch  .x-content-band.bg-pattern.parallax {
        background-attachment: initial !important;
    }
}

P

The provided code is old, kindly use this instead:

@media (max-width: 979px) {
    .touch .x-content-band.bg-image.parallax, .touch .x-content-band.bg-pattern.parallax,
    .touchevents .x-content-band.bg-image.parallax, .touchevents .x-content-band.bg-pattern.parallax {
        background-attachment: scroll !important;
    }
}

In regard to your concern regarding parallax on smartphone view in Cornerstone, Cornerstone smartphone view is only a temporary view of how your website will look in mobile devices. It’s still your same desktop browser. Some of the functionality is handled by devices themselves so in order to see exactly how a website look and work functionally, it’s best to test on actual mobile devices. Parallax has been disabled in mobiles due to the certain reasons. You can find more about it here: http://stackoverflow.com/a/23420490/3107931

Thank you!

P

Thanks for updating. The above code should work fine. Kindly clear your browser’s cache before testing. If you are testing on higher resolution than 979px, you can try changing the max-width value.

Cheers!