Topic: Jarallax height not adjusting to content..
Kreative Webworks pro asked 7 years 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>
Ollie Vincent pro answered 7 years ago
/*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/ Thanks
Kreative Webworks pro commented 7 years ago
Thanks for your help Ollie! I really appreciate it!Ollie Vincent pro commented 7 years ago
No problem :)Marta Szymanska staff pro premium answered 7 years ago
Ollie Vincent pro answered 7 years ago
<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> </div> </div> </div> </div> </div> </div> </div> </div>
Kreative Webworks pro commented 7 years 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..FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Pro
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No