Topic: jarallax, hide on screens smaller than lg
Hello,
First of all, I wish you a happy new year to the whole MDB team, and I hope you do not have too much headache this morning.
Well, here's my question:
In MDB Pro there are several templates that use "Jarallax".
My question is I want to hide the Jarallax div with "d-none d-lg-block", but the problem is that there is a large white space that replaces the image of the Jarallax.
How to remove this white space.
For the code I took that of MDB Pro 4.6.0 and the template about-us.
I put in the beginning of the code "d-none d-lg-block", maybe it's not the right place, but the JARALLAX code is in the "HEADER, and we can not put outside.
Thanks for your support
Have a good day, and rush for 2019 !!!
Alain
<div id="home" class="view jarallax d-none d-lg-block" data-jarallax='{"speed": 0.2}' style="background-image: url(https://mdbcdn.b-cdn.net/img/Photos/Others/img%20%2853%29.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center;">
<div class="mask rgba-stylish-light">
<div class="container h-100 d-flex justify-content-center align-items-center">
<div class="row pt-5 mt-3">
<div class="col-md-12 mb-3">
<div class="intro-info-content text-center">
<h1 class="display-3 white-text mb-5 wow fadeInDown" data-wow-delay="0.3s">ABOUT <a class="white-text font-weight-bold">US</a></h1>
<h5 class="text-uppercase white-text mb-5 mt-1 font-weight-bold wow fadeInDown" data-wow-delay="0.3s">Lorem ipsum dolor sit amet consectetur. </h5>
<a class="btn btn-light-blue btn-lg wow fadeInDown" data-wow-delay="0.3s">portfolio</a>
<a class="btn btn-indigo btn-lg wow fadeInDown" data-wow-delay="0.3s">About</a>
</div>
</div>
</div>
</div>
</div>
</div>
Hello Piotr,
Thank you for your reply.
No.
By taking the source code of the ecommerce template of MDB Pro 4.6.0, I add only in the DIV "d-none d-lg-block", which presents the same problem.
If not everything is identical to the source code.
Once this Jarallax problem is fixed on screens smaller than lg, I will do my layout.
Here is the code of the div modified with d-none d-lg-block:
<div id = "home" class = "view jarallax d-none d-lg-block" data-jarallax = '{"speed": 0.2}' style = "background-image: url (https://mdbootstrap.com /img/Photos/Others/img%20%2853%29.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center; ">
<div class = "mask rgba-stylish-light">
This is the original code of the ecommerce page of MDB Pro.
//Removed code cause it's too long.
Thank you and good day
Alain
Piotr Glejzer staff commented 6 years ago
Ok, I understood. But did you try use something like that?
Hello Piotr,
Yes, indeed, there is a white space if we use 'd-none d-sm-block'.
As for CSS, it is already embedded in the css style of the original page.
Thank you, and have a good day.
Alain
Piotr Glejzer staff commented 6 years ago
Yes, I know that about CSS is embedded of the original page but there is height on rigidly but if you change to max-height white space disappear. Have a nice day.
LAGIER pro premium priority commented 6 years ago
Hello Piotr,
Sorry I'm late to answer your information.
Actually putting jarallax {max-height: 700px}, it works perfectly for 800x600 display, but not for smaller sizes.
Maybe I have to give up this idea of hiding the div jarallax?
Thank you and good day.
Piotr Glejzer staff commented 6 years ago
Can you try this?
LAGIER pro premium priority commented 6 years ago
Hello Piort,
Thanks for your help.
With your recommendations for modifying Jarallax's css, I tested several things and I think I found the right solution.
That's what I modified, can you tell me if the code is correct.
Thank you.
Part of the modified CSS code for Jarallax:
html,
body,
header,
.jarallax {
max-height: 100%;
}
@media (max-width: 740px) {
html,
body,
header,
.jarallax {
max-height: 100vh;
}
}
@media (min-width: 800px) and (max-width: 850px) {
html,
body,
header,
.jarallax {
max-height: 100vh;
}
}
To test here is my page:
https://haute-savoie.ialpes.com/hebergement/hebergements-haute-savoie.html#hebergements
Piotr Glejzer staff commented 6 years ago
Yea sure this is a good option. I think you should give to 'Où dormir ?' card some extra margin on mobile to look good. Everything is fine. Have a nice day.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB jQuery
- MDB Version: 4.5.15
- Device: MDB Pro
- Browser: Chrome, FF
- OS: Windows 10 64
- Provided sample code: No
- Provided link: No
Piotr Glejzer staff commented 6 years ago
Hi,
or did you try remove class jarallax on smaller device with JavaScript?
Best,
Piotr