Search code examples
materializeparallax

Materialize: parallax doesn't work for mobile

It seems that I stumbled upon a little problem. My 2 parallaxes work in normal mode but when I scale down to mobile version, my images are just still and full scaled and thus the effect is gone. I didn't do anything special with my parallaxes (code down below) and I didn't add any styles myself to the images. I've also initialized the code using jQuery.

If someone knows an easy fix to this problem, please do let me know. If you don't have enough of my code, let me know as well, I'll post more then (it's my first post, don't know how much you guys really need)

Anyway, thanks a lot already!

Kind regards, Mout

<!--parallax 1-->
<div class="parallax-container">
    <div class="parallax">
        <img src="IMAGES/DSC_2452c.jpg" alt="" class="responsive-img">
    </div>
</div>

 <!--parallax 2-->
<div class="parallax-container">
    <div class="parallax">
        <img src="IMAGES/DSC_2682c.jpg" alt="" class="responsive-img">
    </div>
</div>
Solution

  • This is likely due to .paralax-container having a default height of 500 pixels. The documentation shows you can easily change this with the following CSS:

    .parallax-container {
    height: 150px;
}

    This also change the height on devices with a larger screen. Using a media query gives us the ability to choose which screen sizes should have the changed container height:

    @media only screen and (max-width: 600px) {
    .parallax-container {
        height: 150px;
    }
}

    Note: if you are compiling from Sass you can use the predefined variables as shown in the documentation.