Close

Account

Documentation

Forum

Menu

parallax image on iphone and ipad

  • Post count: 5
    MyCrowd
    July 17, 2014 at 4:21 am #1799

    I have setup a 5 layer parallax that works great on desktop browsers. But when I view on an ipad or iphone, there is only a single image (the first layer), and it is greatly magnified.

    How can I control what static image appears in iphone or ipad.

    (I tried to manually hide via the .newparallax and .parallaxlayer classes, but I think something is overriding my CSS.)

    thanks

    Post count: 2679
    Rai
    July 17, 2014 at 7:13 am #1816

    Hi MyCrowd,

    Actually, parallax effect is disabled on mobile devices because of performance issue.
    Have you place your custom css into Additional Style?

    Thank you

    Post count: 5
    MyCrowd
    July 17, 2014 at 4:04 pm #1837

    I know parallax is disabled on mobile, but some logic is running to display a single image. And it is scaling that image really big on mobile. My CSS works on desktop but not on mobile, so I think there is some JS that is overriding. Yes, I have tried placing my CSS in the Additional Style section and in other .css files directly.

    How do I disable or control the background image on a parallax section? What is the CSS?

    Here is the page for you to see on mobile. Notice how the background image is huge. This image is the first image of the parallax, but how do I control its size on mobile?

    https://mycrowd.com/blog/mycrowd-home/

    Post count: 2679
    Rai
    July 18, 2014 at 8:02 am #1863

    No, there is no script that resize section background on Mobile.
    If you want to override the background via CSS, you can override this class .parallaxoverlay but it will override on all section.

    Anyway, your link doesn’t work. It show 404 page.

    Thank you

    Post count: 5
    MyCrowd
    July 19, 2014 at 6:53 am #1900

    Sorry, I renamed the file since posting. Here it is:
    https://mycrowd.com

    I am setting the css class as follows. It hides on desktop but not on mobile.

    .parallaxoverlay {
    display:none;
    }
    .newparallax {
    display:none;
    }

    Post count: 2679
    Rai
    July 19, 2014 at 8:46 am #1905

    Why do you hide the overlay? I thought that you want to override background.
    I checked your background overlay is disappear in dekstop and mobile.

    Thank you

    Post count: 5
    MyCrowd
    July 20, 2014 at 5:14 am #1914

    I dont think you are understanding. I want the whole parallax background/ images to disappear when the screen is smaller than 1024. It still displays on both my iPhone and iPad. If you look on an iPhone the text overlaps the background image and is very hard to read, that is why I want to hide on mobile. Some logic is running in your script that detects the mobile device, disables parallax scrolling and then just displays static images for the parallax. I think this must be overriding my CSS to hide the background.

    Can you tell me where the JS is that disables parallax on mobile? (so I can customize)

    Please tell me any other way to successfully hide the parallax on mobile.

    thanks

    Post count: 2679
    Rai
    July 20, 2014 at 7:02 am #1917

    Hi MyCrowd,

    I understand that you need to hide your background on mobile. What I was said to you is try to override background by override background on .parallaxoverlay. Like this:

    Those css will override background only on mobile device with screen 1024px width or lower.

    Parallax on mobile is disabled by this script: public/js/internal/jquery.jlanding.js on line 71.

    Thank you

You must be logged in to reply to this topic.