Материализация: параллакс не работает для мобильных - PullRequest
Новая
       36

Материализация: параллакс не работает для мобильных

0 голосов
/ 06 сентября 2018

Кажется, я наткнулся на небольшую проблему. Мои 2 параллакса работают в обычном режиме, но когда я уменьшаю масштаб до мобильной версии, мои изображения просто неподвижны и полностью масштабируются, и, следовательно, эффект исчезает. Я не делал ничего особенного с моими параллаксами (код ниже), и я не добавлял никаких стилей к изображениям. Я также инициализировал код с помощью jQuery.

Если кто-то знает, как легко решить эту проблему, пожалуйста, дайте мне знать. Если вам не хватает моего кода, дайте мне знать, тогда я опубликую больше (это мой первый пост, не знаю, сколько вам, ребята, действительно нужно)

В любом случае, большое спасибо уже!

С уважением, 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>

1 Ответ

0 голосов
/ 07 сентября 2018

Вероятно, это связано с тем, что .paralax-container имеет высоту по умолчанию 500 пикселей. Документация показывает, что вы можете легко изменить это с помощью следующего CSS: 

.parallax-container {
    height: 150px;
}

Это также меняет высоту на устройствах с большим экраном. Использование медиазапроса дает нам возможность выбрать, какие размеры экрана должны иметь измененную высоту контейнера: 

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

Примечание: если вы компилируете из Sass, вы можете использовать предопределенные переменные, как показано в документации .

...