Parallax on some mobile don&#38;#039;t work well

Topic: Parallax on some mobile don't work well

Neanrakyr pro asked 6 years ago

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: https://imgur.com/a/jTeD7 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>

Add comment

Marta Wierzbicka staff answered 6 years ago

0 0 Best answer

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>

<figure class="col-md-4">
<a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(40).jpg" data-size="1600x1067">
<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-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

Please insert min. 20 characters.

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" 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="1600x1067"> <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="1600x1067"> <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="1600x1067"> <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="1600x1067"> <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="1600x1067"> <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="1600x1067"> <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

Add comment

Neanrakyr pro answered 6 years ago

0 0 Best answer

Version 4.5.0 Parallax still bug on small device https://imgur.com/a/il6Af

Ollie Vincent pro commented 6 years ago

Any chance you could post your full code here?

Add comment

Marta Wierzbicka staff answered 6 years ago

0 0 Best answer

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

Neanrakyr pro commented 6 years ago

File send.

Marta Wierzbicka staff commented 6 years ago

I've sent you an email.

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB jQuery
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

Neanrakyr

Pro User 82Support score
17Questions 2Answers 1Snippets