@tav I have just updated my site and launched my new product today. Everything is working perfectly except for limelight stack in iPhone mode only. (Apologies if this has been asked before - I can not find)
I have five types of product as per picture attached, when I open one of these types on Full screen, Tablet etc. all OK and limelight appears as should be. When I open on iPhone I can not scroll at all to BUY button at bottom and content shows only partially.
Limelight has to size itself to the height of the page. The document is returning a height that is much to large to the Limelight script and therefore it thinks everything is on screen.
Even when the browser is only 800px high, it is reporting back as over 3000px high and so limelight is that height and consequently does not scroll.
This must be being caused by something on the page. It is not the slow loading that is causing it as when the browser is re-sized the same problem occurs as the re-calculation is done.
Try half splitting the page until the problem goes away as per the normal debugging procedure and let us know how you get on.
I am however suspicious of the slow loading of the page as it may mean that something else is being imported. There are also (as you may know) 27 warnings in the console where you are importing insecure content into a secure (https) page. This really needs sorting out, come what may, as it could lead to browser warnings and other issues for your store.
You also have 1 error: Google foco font does not exist at weight 400. It is spelled Foco
@tav THANKS for your prompt help as always, On everyday tab I have removed picture, “Buy” button and reduced size of header and its still the same. As all that is left is a header and a paragraph and I don’t want to lose this "message"what more can I do please?
Content from insecure place? The only thing I have done new to this site is the new page for product. The images are warehoused on server for these pages and the shop is Cartloom and just snippets added. Is it these or something else you can see?
Slow loading - the main image on new page is taking time to load but I have “squashed” this with Squash and lowered resolutions to make it small as I can without losing definition.
I will look up coco bit and change.
THANKS as always you are a STAR!
Half splitting the page does not mean removing things you need, it is the basic, frontline fault finding method used in almost all situations and as such there is a ton of information on the web if you are interested.
However, as a quick summary of what to do:
Remove half the content - does the problem still exist?
- Yes: Repeat, cut it in half again
- No: The problem is in the half you just removed → put just this part back and repeat the process until you only have one element left that is the problem causer.
In very complex situations you should need no more than 8 or 9 attempts at max to find the offending element and this should take no more than 5 or 10 minutes.
Look in the browser console. There are 23 png images which you have linked with non SSL URL’s. Once you move your site to SSL then all its assets need to be similarly addressed.
You have 10.5MB of images on that page which is enormous!
Do they all need to be png or could you make them smaller as jpg’s
Try https://tinypng.com and see if you can get better compression without sacrificing quality. Use originals though - do not try to re-compress already modified images.
You server is also not exactly quick in its response. There is quite a delay before the page is served - this may or may not be something that you want to address, that is a business decision.
Pingdom tools are useful to see what is going on. Here is your site:
@tav Thanks but maybe I did not communicate well. I set up a blank page with a header and one limelight only from affected page, by deleting everything. It still had the problem, I deleted the picture and buy button and still had the problem. I deleted the header so the only thing left was the limelight from original page. I copied back in from original page the stack with picture and buy button. It worked! However I then started to add one section at a time no matter what section I added it didn’t work. Footer/Header/ body - however when I removed it again it worked so I gave up for now. I have used something different that works for now but not what I really want in end as I have to go live in selling the items as I’m a week behind. The shop is up and running!
Now I have time to correct things, I will look at all the things you say and work on them one at a time. I have all original images in hd from source of product and will have a go with tiny png.
Thanks for the other tips gratefully received and THANKS as always for your full critique and help.
You are a star have a great rest of day!
Paul
Ah - OK, thanks for the clarification. That description has several obvious contradictions which leads me to think that there is some sort of serious problem with the project.
If the problem exists in isolation, then disappears when you remove certain things, then still does not reappear when they are added back but does appear when something else on the page is added back I smell a structural issue with the stacks on the page. This would come firmly into the category of not reproducible which are obviously the worst type to track down.
If you think it would help then send me a project file but simplified as much as possible so that it demonstrates the problem sequence above. (perhaps one limelight and one other section of the page?)
I’m more than happy to have a look.
@tav THANKS again for your help, I deleted the page to get the job done and up and running. However I can replicate fit no problem as I have all constituent bits. I will drop a file consisting of two pages, one that works and one that doesn’t. However I have a gut feeling that its the bit with circles in that causing the problem.
ONCE AGAIN THANKS YOU ARE A STAR!
Paul
Those circles look remarkably complex in the way that they are constructed - I will take a look at the file.
FYI - You appear to have introduced another font error since I looked last. Google font names are case sensitive and you now have a FOCO as well as a foco call on the page. The name is Foco with just one capital at the start, exactly as the relevant Google Fonts page
@tav I am so grateful for your input, I was just using tinning above compressing some of my bigger pics.
I am going to start a new google font called COCO just for clowns like me!
Its a needle in haystack time for me, so where do i find the Foco that’s more than 400 without having to go through every bit of text please?
I will not be bothering for quite a while as i’m going through everything you have already said.
THANKS Paul
“tinning” = Tinypng
From your page code, it looks like you have typed in the font name wrongly on pretty much every HeaderPro stack.
Firstly please, please please, only load Google Fonts once per page. The Header Pro Font settings have a button to select if the font has already been loaded so that you only need to call the front once per page (i.e. in just one Header Pro stack), all the others should have the “Don’t Load” button pressed.
Secondly, normally even if you do this it should not be a problem as the browser is smart enough to realise that you have already loaded it and not re-load it multiple time (i.e. it will cache it) BUT (and this is a huge but here) - because you have typed in an invalid font name, this equates to an invalid URL on the google fonts site. Your browser therefore gets a 404 error returned to it, there is nothing to cache and so it is trying again 24 times per page load.
Make sure all the font names read “Foco” and that only the first one has the Load New button enabled. Look in the browser inspector to check that you have eradicated all of the 404 errors that mention Google fonts.
2 Likes
Typo:
for air travel, long care rides and train journeys?
@rob THANKS for taking the time to Care! or was that Car? :-) ;-)
All changed and if you are interested in buying a pair let me know and I’ll give you 10% introductory rate.
Have a great Day!
Paul
@tav hopefully all fonts sorted, All pics squashed with Tinypng and just working on other stuff to close any gaps you have mentioned.
THANKS once again!
Paul
The load is immeasurably faster now! Let’s pursue the cause of the content length being misreported then now.
@tav apologies you have lost me - how do I do this? Apologies and THANKS for your input.
As per my previous posts - simplify the page down to just the Limelight and the one other stack that causes the problem when added so that I have something reproducible to work with and then send me that test page. I should then be able to work out why the incorrect height is being reported to the Limelight JS code.
@tav I have sent you an email with zipped file of affected pages only. I have put up a new TEST page on site which I will convert over after your response as all seems OK now. THANKS FOR ALL YOUR HELP you are a STAR!!!
Paul
I am putting this into a new topic as solved and want to share learning points.