Text too long over jarallax background image

Hi All

I have some code that runs a background image with moving text over the top similar to this website under the DINING section: https://www.carlylehotel.com.au/ (this is not my website).

I can’t link my site here as it is for a client and is under development,

My site is working fine on a computer and pad however on a phone the text runs longer than the image… if you look at the site above the image is extended and the image moves slower.

I am using Bootstrap 4 and below is my code.

Any help would be great… I think it might just be a matter of adding some small code.

mrmbarnes

<main>
		<div class="view jarallax row  justify-content-center align-items-center" style="height: 100vh;">
		<img class="jarallax-img" src="images/pokies-bg.jpg" alt="">
		  <div class="mask w-100">
			<div class="container flex-center">
			<div class="row">
			  <div class="col-12 wow fadeIn">
				<h1 class="tinos text-warning text-uppercase text-center" style="text-shadow: 2px 2px #000000;"><strong>POKIES AT THE  HOTEL</strong></h1>
		        <h3 class="tinos text-muted text-uppercase text-center" style="padding-top:0.5em; color:#075c3f; text-shadow: 2px 2px #000000;"><strong>The BEST GAMING ROOM IN TOWN</strong></h3>
		    	<div class="text-white text-center" style="padding-top:1em; text-shadow: 2px 2px #000000;">The  Hotel has 40 of the latest pokies, TAB, Keno, Keno Racing and much more.</div>
				<div class="text-white text-center" style="padding-top:1em; text-shadow: 2px 2px #000000;">Come and check it out today... it could be your lucky day.</div>
			  </div>
			</div>
			</div>
		  </div>
		</div>
	  </div>
	</main>


<script>
    // object-fit polyfill run
    objectFitImages();

    /* init Jarallax */
    jarallax(document.querySelectorAll('.jarallax'));

    jarallax(document.querySelectorAll('.jarallax-keep-img'), {
        keepImg: true,
    });
  </script>

Hi,
The question seems to be what controls the text/image relation, I could think both Jarallax and Bootstrap needs to be considered in how they work with your code.

You’re using Jarallax and Bootstrap together with your own html. That’s three parts in the combo, isn’t there also a forth part as your own CSS other than the style attributes?

IMHO it is too much to investigate without access to your live site, maybe if you could narrow the scope to some relevant code snippets. :wink:

1 Like