2

I have the following code in a module placed in the footer of my site:

<div class="container-fluid">
<div class="row">
<div class="col-md-5 col-sm-5">
<p></p>
<a href="https://bestscottishcottages.co.uk/" target="_blank" rel="noopener"><img src="images/partner-logo-transparent.png" alt="partner logo transparent" width="175" height="145" style="display: block; margin-left: auto; margin-right: auto;" /></a>
<p></p>
</div>
<div class="col-md-7 col-sm-7">
<h3>Bill &amp; Sukie Barber</h3>
<p><span style="font-size: 14pt;"><a href="tel:+441450373424">{zen-phone}{/zen-phone}01450 373 424</a></span></p>
<p><span style="font-size: 14pt;"> <a href="mailto:billandsukie@gmail.com">{zen-envelope}{/zen-envelope}billandsukie@gmail.com</a></span></p>
<p><span style="font-size: 14pt;"> {zen-map-marker}{/zen-map-marker}Priestrig Croft,<br /> by Hawick<br /> TD9 7NT</span></p>
<div class="social">
<p><a href="https://www.facebook.com/Fiddle-Hill-Cottage-727153347486812/" target="_blank" rel="noopener">{zen-facebook-square}{/zen-facebook-square}</a><a href="https://www.instagram.com/fiddle_hill_cottage/" target="_blank" rel="noopener">{zen-instagram}{/zen-instagram}</a></p>
<p><a href="https://www.google.com/maps/dir/Current+Location/55.4408087,-2.8147109" target="_blank" rel="noopener" class="btn btn-green">Get directions</a></p>
</div>
</div>
</div>
</div>

On this page the image and address information are correctly displayed side by side on a landscape iPhone 6/7/8 however on this page they are displayed on top of each other. Both pages use the same module to display the information however, they do use a different variation of the same template. I for one, cannot seem to find out what is causing the difference. Could anyone please offer any advice?

Thank you in advance. Donna

2

On the first page (root), you are loading Bootstrap 4 from MaxCDN. On the second page (availability) you are loading a local version of Bootstrap 2.

You are also only loading the JS /media/jui/js/bootstrap.min.js on the availability page.

Try including Bootstrap 4 on the availability page. That should fix that problem.

Additionally, I would stop loading the Bootstrap 2 JS file on the root page. You don't need both versions 2 and 4.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.