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 & 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:[email protected]">{zen-envelope}{/zen-envelope}[email protected]</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