Hi Glen

That's great... thank you for the update and for sharing the solution.

Ciaran

I gave this to the server tech if he had an iPad (1024x768 resolution) to look at. It was beyond my ability to figure out the issue. He fixed it. We can mark this ticket as solved.

Here is his info:

Hello Glen,

I have an iPad which was able to replicate the reported issue on prairiechristmastrees.org. I noticed that it also occurred in Safari on desktop when resizing the window where the mobile menu wouldn't load. I also replicated the issue of it not loading formatting properly sometimes.

After troubleshooting it was the GZIP compression not working well with Safari and generating "cannot decode raw data" errors on some Javascript/CSS files. The GZIP compression settings have been adjusted in IIS and now the issues on prairiechristmastrees.org are fixed here.

Please clear browser cache and retest from your side.

The upload_tmp_dir can't be set per account and can only be set globally for all accounts on the server. It's good to discard the message as it will use the default operating system one when it is not set. You shouldn't see any issues with uploading files on the current setup.

It is not reading a cache. This is happening on all iPads of this screen size (1048 x 764). Caching doesn't explain why the hamburger menu doesn't work, despite the odd screen display that appears and then disappears for some.

Hi Glen

The issue is difficult as it doesn't appear to be an issue with all iPads. Going by your screenshot, it appears that the CSS for the menu is not been loaded at all. However, this CSS is bundled with the template CSS so one can't load without the other. The only explanation I can think of is that your iPad is loading an old cached version of the CSS.

Ciaran

Yes, I did find one. And their responsive menu works fine on my iPad. How will I find what is glitched with my site? What would you suggest I try?

There is a web development inspect tool for iPads. https://andrewbrookins.com/technology/coding-on-ipados-browser-dev-tools-with-inspect/
What selector would I be looking for if I could find something there that has been altered somehow. Is this likely to help narrow it down?

I did temporarily delete all my custom css and try it, but this made no difference. The iPad display is still corrupted and hamburg menu not working.


Glen

Hi Glen

I dont like to give out client URLs however if you search the forum for 'kinvara', you should be able to find some examples as we would almost always request a URL.

Ciaran

Unfortunately this suggestion did not correct the problem. It doesn't matter which browser is used. Or which 1024x768 iPad. I have tried additional ones lately that have never loaded this website before.

No slide out menu appears on the left when the hamburg menu is tapped (if the tap even works), and the layer slideshow does not work, but drops the images one below the other.

Again, although the home page will auto correct after a period of time on my ipad, if I do a page refresh it breaks again. On my client's ipad it is worse and rarely corrects.

Can you supply any other websites created with this template (that are not on your server - ie demos) that I can access to determine if the hamburg menu works.

Other users of Kinvara here who have a standard 1024x768 screen resolution iPad, can you go to https://www.prairiechristmastrees.org to see if the hamburger menu works? Do a refresh as well. You may also see this distorted display. See attached

Thanks
Glen

OK. Thank you.

Will try the cache clearing. Thank you for that as well.

Glen

Hello

May I suggest the following article on clearing cache in Safari... https://support.apple.com/en-ie/HT201265. Maybe you are having the issue on a different browser? Currently, we are testing your site using Safari (16.5).

50% coupon codes are only valid if you have previously subscribed to the Joomla 3 version of the same template.

Ciaran

I need an answer to
https://joomla51.com/forum/joomla51-templates-remaining-to-be-converted-for-j4
How can I get one please.
I have decided that if the template Substance is not to be upgraded for J4 then I should just purchase another one.
I chose Colette but the code does not work.
For the code J4COLETTE8887 I get the error The coupon code you entered is invalid or expired
It's becoming impossible for me to upgrade my site. PLEASE talk to me about this Ciran. I need to get these sites updated.
Surely if the template I am using, that was on the list to be upgraded, is not going to be then I should be able to select another one in this case.

Thank you.
Glen Pavelich

I can't clear browser cache on an iPad to my knowledge, but I would have to clear it, please understand, and so would every iPad user, anytime I have done any updates to the site. You will have to look at it from the 1024x764 px screen resolution iPad.
The error happens every time I do anything to ANY page as far as adding an update to the content of a page, or anything else I do.

RE: When you say you add a * to a page, are you referring to page content or CSS?
That would be content, but it wouldn't matter, the error will reoccur if I do anything to either and do a save.

That's for the one issue, but how are you making out getting the mobile menu working for iPads of this resolution. Again, you will have to check it on the
1024 x 764 most likely.

Hi Glen

Have you tried clearing all browser cache? As I mentioned, we are unable to replicate the issue and we find your mobile menu looking nothing like your screenshot.

When you say you add a * to a page, are you referring to page content or CSS?

Ciaran

This is almost more frustrating than the hamburger menu not working. It's not just a css change (as previously thought) that causes the site to break on the iPad, it's any change at all to any page. I simply added an * to a page as a test, saved it, and went back to the iPad. Did a page refresh and yup...the page is broken again. Doing an iPad reboot fixes it only until the next 'save' to any page on the site.

I don't know where the duplicate logo is coming from, but regardless the header breaks.
Compare the attached to this https://www.prairiechristmastrees.org/

I hope this can be addressed soon.
Thank you

My media queries uploaded here as a pdf.

This is what I initially saw (embeddedpdfpage" image attached) as stated above, but my iPad corrected once I rebooted. I'm assuming hers will to. It seems any change to the css creates this and requires a reboot to correct.

Also, I have added a couple of media queries to add top margins or padding as banner and page content were partially hidden for smaller screens.
This is using developer tools on my firefox and the changes also responded correctly on my ipad.

@media only screen and (max-width: 1024px){
.layerslideshow * {
padding-top: 13px;
}
.maincontent {
margin-top: 50px;
}
#container_top1_modules {
padding-top: 70px;
}
}

@media only screen and (max-width: 883px){
#container_top1_modules {
padding-top: 10px;
}
}

You may suggest a cleaner way to do this.
Hamburger menu still not working.

Regarding the sliding banner. See image attached. Developer tools does not show the problem, but on the ipad (1024x768) the banner images are one below the other showing behind the page content.

Nope.
When I first opened the site on my ipad the initial screen showed the menu separated out and above the top black wrapper. They were listed in block format one below the other in a white background, and the sliding banner images were also one below the other. Then I did a refresh and that corrected, but the hamburg menu still doesn't work, the sliding banner doesn't slide.

The media query also inserted a space between the black top wrapper and the slider.

https://www.prairiechristmastrees.org/images/sampledata/help/whitegap.jpg

Hi Glen

A bit of a shot in the dark this but to amend try adding the following to the Custom CSS field of your templates parameters (Extensions -> Templates -> [YourTemplateStyle] -> Custom CSS)....

@media only screen and (max-width: 1140px) {

  #container_header {

    position: relative;

  }

  #container_header + div, 

  .sticky-wrapper + div {

    padding-top: 0;

  }

}

Ciaran

Unfortunately the fix did not work. I have 1.0.1 installed and the hamburger menu on the iPad still does not respond in anyway upon tapping. Also, I notice the feature slider does not slide on the ipad.
prairiechristmastrees.org/
Again everything works fine in responsive design mode on the computer.
The demo template on your site does work however. http://joomla51.com/demo/0150

(I noticed the Nina demo, under template demos, is not centered on the ipad)


Glen

Hi Glen

I have just created an update for this template which updates the mobile menu to the MMenu format used in our more modern templates. Hopefully, this will resolve your issues. For details on updating your template may I suggest the following article.. https://joomla51.com/tutorials/joomla-basics/updating-your-joomla-template

Ciaran

I have an iPad Mini 2.
Software version 12.5.1
and the site owner has
a 5th gen. iPad and runs 16.6.

And the hamburger menu doesn’t work.

RE: "For the padding issue, does updating your template to the latest download resolve the issue? This issue does not appear to be present on the latest template version"
The only thing I see on your site is Kinvera 1.0.0 which is what I have on the site now. Is there some other template update that you are referring to that fixes the responsive design side menu padding??

J51 - Kinvara - Joomla 4 - Released: 21-Aug-2022 Updated: 12-Dec-2022 Version: 1.0.0

Glen