Jarallax height not adjusting to content..

Kreative Webworks asked 7 months ago

The jarallax part of the page is not adjusting to fit all of the content in mobile. Please see the link below:http://www.wsieworksstaging.com/citrus-heights/It is in the "Why Choose Us?" section... Here is the code I am using: <section class="view jarallax v-pad-big" data-jarallax='{"speed": 0.2}' style="background-image: url(img/home/why-choose-us.jpg); "><div class="full-bg-img"><div class="container v-pad-big" ><h2 class="text-center white-text">Why Choose Us</h2><p class="bigger-text white-text">Let's be real…no one likes going to the dentist. However, proper dental care is a necessity for a healthy, productive, and happy life. We're here to provide you with the best dental care with the least amount of "hassle" guaranteed!</p><p class="bigger-text white-text">Since 1996, No Hassle Dentistry has been dedicated to providing excellent dentistry that is guaranteed, at prices you can afford. </p><p class="font-bold bigger-text white-text">Here's what you can expect from us:</p><ul class="bigger-text white-text"><li>Hours of operation tailored to fit your schedule (including Saturdays)</li><li>Payment plans to fit any budget</li><li>Full-service dental care under one roof</li><li>Excellent customer service </li><li>Sincere, friendly people who care about making your visit the best it can be</li></ul><p class="bigger-text white-text">You have our commitment that our recommendations have your overall health in mind and your best interests at heart.</p></div></div></section>


It's as Marta said above. Media queries are needed to insure full responsiveness.

Something like this should do it (paste it at the bottom of your stylesheet):

/*This is the bootstrap breakpoint */
@media (max-width:768px){
.jarallax {
 min-height: 1500px !important;

Fiddle around with the number until you get it responding correctly on all devices.

You can read up on media queries here: http://stephen.io/mediaqueries/


Kreative Webworks commented 6 months ago

Thanks for your help Ollie! I really appreciate it!

Ollie Vincent commented 6 months ago

No problem :)


could you send me this HTML file to m.szymanska@mdbootstrap.com? I will check this. You can also use media queries and adjust a height of jarallax for mobile devices.




Have you tried code like this?


<div class="view jarallax"data-jarallax='{"speed": 0.2}'style="background-image: url(https://mdbootstrap.com/img/Photos/Others/background.jpg);">

<div class="full-bg-img">

<div class="mask rgba-purple-slight">

<div class="container">

<div class="d-flex align-items-center d-flex justify-content-center"style="height: 700px">

<div class="row mt-5">

<div class="col-md-12 wow fadeIn mb-3">

<div class="intro-info-content text-center">

<h1 class="display-1 white-text mb-2 wow fadeInDown"data-wow-delay="0.3s">Welcome on my page!</h1>

<h4 class="mb-3 mt-1 white-text font-weight-bold wow fadeIn"data-wow-delay="0.4s">Lorem ipsum dolor sit amet</h4>

<a class="btn btn-pink wow fadeIn"data-wow-delay="0.4s">Read more</a>









Kreative Webworks commented 6 months ago

Yes, I have tried the code Ollie, the issue is when it gets to mobile size the overflow content is hidden, I want the height to be responsive to fit all of the content. Any help would be much appreciated. I emailed the code to Marta as well and I am waiting to hear back..

Please insert min. 20 characters.


Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No