Topic: Parallax on some mobile don't work well
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
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 7 years ago
File send.Marta Szymanska staff pro premium commented 7 years ago
I've sent you an email.
Version 4.5.0
Parallax still bug on small device
https://imgur.com/a/il6Af
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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Answered
Specification of the issue
- User: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No