jarallax, hide on screens smaller than lg


Topic: jarallax, hide on screens smaller than lg

LAGIER pro premium 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://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>


Piotr Glejzer staff commented 6 years ago

Hi,

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

Best,

Piotr


LAGIER pro premium priority answered 6 years ago

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?

html,
body,
header,
.jarallax {
max-height: 700px;
}
Because you have a problem with white space when you are using 'd-none d-sm-block' ?

LAGIER pro premium priority answered 6 years ago

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?

@media (max-width:740px) {
html,
body
.jarallax {
height:100%;
}
}

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.


Please insert min. 20 characters.

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