Sign in


Sign up


Parallax on some mobile don't work well

MDB SupportCategory: MDB jQueryParallax on some mobile don't work well
Neanrakyr asked 3 months ago in MDB pro, version:4.4.5

Hello, I have a problem

The parallax work fine but when I go to the mobile the section bellow the parallax the H2 value is on the picture

Try on some mobile (Iphone 5S and Samsung Galaxy Mobile)

Here the link:

Bug problem mobile

Code:

<header>
<div class="view intro hm-purple-light jarallax" data-jarallax='{"speed": 0.2}'>
 <div class="full-bg-img flex-center">
 <div class="container text-center white-text wow fadeInUp">
 <img class="img-fluid mx-auto" src="img/logo.png" alt="Logo">
 <div class="marg-title">
 <h1 class="text-center" style="font-weight:700;">First Step - Le Film</h1>
 <h2 class="text-center">Un film réalisé par les étudiants Esupcom Lille</h2>
 </div>
 </div>
 </div>
</div>
</header>
<main>
<section class="py-5 pb-5">
    <div class="container">
        <div class="row">
            <div class="col-md-12 col-xs-12">
                <h2 class="text-center text-uppercase font-bold hippiepink-text">Synopsis</h2>
                <p class="text-center" align="justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
            </div>
        </div>
    </div>
</section
</main>

 

3 Answers
Marta Szymanska answered 3 months ago

Hi,

could you send me a file with your whole code to m.szymanska@mdbootstrap.com so I can fully recreate a problem?

Best,

Marta

Marta Szymanska replied 3 months ago

I’ve sent you an email.

Neanrakyr replied 3 months ago

File send.

Neanrakyr answered 3 months ago

Version 4.5.0

Parallax still bug on small device

View post on imgur.com

Ollie Vincent Pro User replied 3 months ago

Any chance you could post your full code here?

Marta Szymanska answered 3 months ago

Hi,

I’ve improved your HTML code from the previous email, so try this:

<!DOCTYPE html>
<html lang=”fr”>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width”>
<meta http-equiv=”x-ua-compatible” content=”ie=edge”>
<title>First Step</title>

<link href=”css/bootstrap.min.css” rel=”stylesheet”>
<link href=”css/mdb.min.css” rel=”stylesheet”>
<link href=”css/fonts.css” rel=”stylesheet”>
<link href=”css/style.css” rel=”stylesheet”>
<link href=”https://fonts.googleapis.com/css?family=PT+Serif:400,400i,700,700i|Pragati+Narrow:400,700″ rel=”stylesheet”>
<style type=”text/css”>
.intro {
height: 100vh;
}
</style>
</head>
<body>
<header>
<div class=”view intro hm-purple-light jarallax” data-jarallax='{“speed”: 0.2}’>
<div class=”full-bg-img flex-center”>
<div class=”container text-center white-text wow fadeInUp”>
<img class=”img-fluid mx-auto logo” src=”img/logo.png” alt=”Logo”>
<div class=”marg-title”>
<h1 class=”text-center” style=”font-weight:700;”>First Step – Le Film</h1>
<h2 class=”text-center”>Un film réalisé par les étudiants Esupcom Lille</h2>
</div>
</div>
</div>
</div>
</header>
<main>
<section class=”section-white py-5 pb-5″>
<div class=”container”>
<div class=”row”>
<div class=”col-md-12 col-xs-12″>
<h2 class=”text-center text-uppercase font-bold hippiepink-text”>Synopsis</h2>
<p class=”text-center” align=”justify”>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
</div>
</div>
</section>
<div class=”view intro-2 hm-black-strong”>
<div class=”full-bg-img”>
<div class=”container flex-center white-text wow fadeInUp”>
<div class=”col-md-9 col-xs-12″>
<h2 class=”text-center text-uppercase font-bold hippiepink-text”>TRAILER</h2>
<div class=”embed-responsive embed-responsive-16by9″>
<iframe class=”embed-responsive-item” src=”https://player.vimeo.com/video/254780708&#8243; allowfullscreen=””></iframe>
</div>
</div>
</div>
</div>
</div>
<section class=”section-white py-5 pb-5″>
<div class=”container”>
<div class=”row”>
<div class=”col-md-12 col-xs-12″>
<h2 class=”text-center text-uppercase font-bold hippiepink-text”>Esuprod</h2>
<p class=”text-center” align=”justify”>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
</div>
</div>
</section>
<section class=”section-grey py-5 pb-5″>
<div class=”container”>
<div class=”row”>
<div class=”col-md-12″>
<h2 class=”text-center text-uppercase font-bold hippiepink-text”>Backstage</h2>
<div id=”mdb-lightbox-ui”></div>
<div class=”mdb-lightbox”>
<figure class=”col-md-4″>
<a href=”https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(145).jpg” data-size=”1600×1067″>
<img alt=”picture” src=”https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(145).jpg” class=”img-fluid”>
</a>
</figure>

<figure class=”col-md-4″>
<a href=”https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(150).jpg” data-size=”1600×1067″>
<img alt=”picture” src=”https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(150).jpg” class=”img-fluid” />
</a>
</figure>

<figure class=”col-md-4″>
<a href=”https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(152).jpg” data-size=”1600×1067″>
<img alt=”picture” src=”https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(152).jpg” class=”img-fluid” />
</a>
</figure>

<figure class=”col-md-4″>
<a href=”https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(42).jpg” data-size=”1600×1067″>
<img alt=”picture” src=”https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(42).jpg” class=”img-fluid” />
</a>
</figure>

<figure class=”col-md-4″>
<a href=”https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(151).jpg” data-size=”1600×1067″>
<img alt=”picture” src=”https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(151).jpg” class=”img-fluid” />
</a>
</figure>

<figure class=”col-md-4″>
<a href=”https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(40).jpg” data-size=”1600×1067″>
<img alt=”picture” src=”https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(40).jpg” class=”img-fluid” />
</a>
</figure>
</div>
</div>
</div>
</div>
</section>
<section class=”section-white py-5 pb-5″>
<div class=”container”>
<div class=”row”>
<div class=”col-md-12 col-xs-12″>
<h2 class=”text-center text-uppercase font-bold hippiepink-text”>Devenir Partenaire</h2>
<p class=”text-center” align=”justify”>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
</div>
</div>
</section>
<section class=”section section-grey py-5 pb-5″>
<div class=”container”>
<div class=”row”>
<div class=”col-md-5″>
<ul class=”contact-icons”>
<li><i class=”fa fa-map-marker fa-2x”></i>
<p>Lille France</p>
</li>

<li><i class=”fa fa-phone fa-2x”></i>
<p>+ 06 XX XX XX</p>
</li>

<li><i class=”fa fa-envelope fa-2x”></i>
<p>contact@firststep-lefilm.fr</p>
</li>
</ul>
<ul class=”social-network social-circle d-flex justify-content-center ml-0″>
<li><a href=”#” class=”icoFacebook” title=”Facebook”><i class=”fa fa-facebook”></i></a></li>
<li><a href=”#” class=”icoTwitter” title=”Twitter”><i class=”fa fa-twitter”></i></a></li>
<li><a href=”#” class=”icoLinkedin” title=”Linkedin”><i class=”fa fa-linkedin”></i></a></li>
</ul>
</div>
<div class=”col-md-7″>
<form id =”contact-form” name=”contact-form” action=”#” method=”POST”>
<div class=”row”>
<div class=”col-md-6″>
<div class=”md-form”>
<div class=”md-form”>
<input type=”text” id=”name” name=”name” class=”form-control”>
<label for=”name” class=””>Nom / Prénom</label>
</div>
</div>
</div>

<div class=”col-md-6″>
<div class=”md-form”>
<div class=”md-form”>
<input type=”text” id=”email” name=”email” class=”form-control”>
<label for=”email” class=””>Adresse mail</label>
</div>
</div>
</div>
</div>

<div class=”row”>
<div class=”col-md-12″>
<div class=”md-form”>
<input type=”text” id=”subject” name=”subject” class=”form-control”>
<label for=”subject” class=””>Objet</label>
</div>
</div>
</div>

<div class=”row”>
<div class=”col-md-12″>
<div class=”md-form”>
<textarea type=”text” id=”message” name=”message” class=”md-textarea”></textarea>
<label for=”message”>Votre message</label>
</div>
</div>
</div>
</form>
<div class=”center-on-small-only”>
<a class=”btn btn-hippiepink” onclick=”document.getElementById(‘contact-form’).submit();”>Envoyer</a>
</div>
<div class=”status” id=”status”></div>
</div>
</div>
</div>
</section>
</main>
<script type=”text/javascript” src=”js/jquery-3.2.1.min.js”></script>
<script type=”text/javascript” src=”js/popper.min.js”></script>
<script type=”text/javascript” src=”js/bootstrap.min.js”></script>
<script type=”text/javascript” src=”js/mdb.min.js”></script>
<script>
$(function () {
$(“#mdb-lightbox-ui”).load(“mdb-addons/mdb-lightbox-ui.html”);
});
</script>
</body>
</html>

Best,

Marta