jarallax, hide on screens smaller than lg

Topic: jarallax, hide on screens smaller than lg

LAGIER priority asked 6 years ago

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://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">
<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>

Piotr Glejzer staff commented 6 years ago

Hi,

or did you try remove class jarallax on smaller device with JavaScript?

Best,

Piotr

Add comment

LAGIER priority answered 6 years ago

0 0 Best answer

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 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?

@media (max-width:740px) {

html,

body

.jarallax {

height:100%;

}

LAGIER 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

Please insert min. 15 characters.

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.

Add comment

LAGIER priority answered 6 years ago

0 0 Best answer

Please insert min. 20 characters.

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:

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?

html,

body,

header,

.jarallax {

max-height: 700px;

}

Because you have a problem with white space when you are using 'd-none d-sm-block' ?

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: Priority
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

LAGIER

224Support score
25Questions 31Answers 2Snippets