Same CSS, Different Result

[mindmastery]

Hi Guys,

Just wondered if some of you CSS guru's out there might have a solution please..(actually you're all guru's, compared to me ; )    I have had a web designer put together some new website templates for me, but for some reason a couple of the pages do not show the formatting when viewed in mobile version (iPhone 6s / iPad), and my web guy seems a bit stumped - as the headers / footers are the very same as those on a page that loads perfectly.   Apparently the headers and footers of the offending pages will display successfully when on their own, so the content must somehow be preventing the formatting from loading.  Please note they all display fine on PC, its just the mobile versions that dont display properly.   Here are the links (note: these will only remain live while the issue exists). 

Successful formatted page:

https://mindtraining.net/website/article.html

Unsuccessful formatted page 1:

https://mindtraining.net/website/index.html

Unsuccessful formatted page 2:

https://mindtraining.net/website/peak-sports-performance-with-mental-training-hypnosis.html

Many thanks,

Craig T

[mindmastery]

Ps. Whenever I try adding content from a problem page to the functioning page (and upload it as a test file), the formatting appears for a split second, then disappears - never to return.   It's like a spy mystery..

[osgood_ · Accepted solution]

Have you tried commenting out <!--     --> your <script> and css files ONE BY ONE to see if the issue is being caused by one of those? For instance that js/jquery.isotope.min.js file is the first I would comment out. Then move on through the <script> files first before going through the css files like animate.css etc

<link href="css/bootstrap.min.css" rel="stylesheet">

   <link rel="stylesheet" href="css/font-awesome.min.css">

   <link rel="stylesheet" href="css/animate.css">

   <link href="css/prettyPhoto.css" rel="stylesheet">

   <link href="css/style.css" rel="stylesheet" />

<script src="js/jquery-2.1.1.min.js"></script>

   <script src="js/jquery.js"></script>

   <!-- Include all compiled plugins (below), or include individual files as needed -->

   <script src="js/bootstrap.min.js"></script>

   <script src="js/jquery.prettyPhoto.js"></script>

   <!-- <script src="js/jquery.isotope.min.js"></script> -->

   <script src="js/wow.min.js"></script>

   <script src="js/functions.js"></script>

It also might be that the iphone/ipad might need a different media query but you say some of the pages do work so I would leave that until last.

[mindmastery]

Many thanks Osgood, will check it out!  : )