Docs

[gabhungtd]

Hi guys,

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

[Rad]

Hi there,

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.

[gabhungtd]

Hi and thanks for your response. I tried a number of things, but am confused why the parallax effect on the homepage
http://christydev.hungdesign.com.au resizes weirdly on touch devices. Can you help me to replace it with a different background image for touch devices? Or alternatively is there a way to make the background image used display smaller?
Thanking you in advance.

[Rue Nel]

Hello There,

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.

[petteromdal]

Hi, I have the same problem and want to enable parallax on tablet/phone, but i couldnt find the file: x-shortcodes-body.min.js. because i don´t have any folder which says “x-shortcodes”. Could you please help.

P

[Jade]

Hi 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;
    }
}

[petteromdal]

Hi again and thanks for fast feedback. But this code unfortunately did not work. I have read several other forum posts and think I have tried that code before. The parallax has always worked when I press the smartphone view in cornerstone, but not on the actual smartphone. Do you have any other possible solutions I may try?

P

[Zeshan]

Hi 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!

[petteromdal]

Thank you again, but this code don´t work either. I tried to put it in the “Body CSS Class(es)” in WP and also tried to put it in the custom css in the customizer. I understand the purpose of why it have been disabled, but the appearance is not optimally with fixed images on smartphone.

P

[Rupok]

Hi there,

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!

[karlanthonyuk]

This reply has been marked as private.

[Christopher]

Hi there,

Please update previous code to :

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

Hope that helps.

[petteromdal]

This reply has been marked as private.

[Rad]

Hi there,

That’s weird, your password isn’t working on my mobile, but works on desktop. Would you mind disabling the password first?

Thanks!

[Author]

Posts