Hi Frank

Unfortunately we are having an issue trying to replicate this problem. Is the issue present on every page of your site? Have you tried disabling your 3rd party plugins to see if that resolves the issue?

Ciarán

Hi Ciaran,
Yes I have also been unable to replicate it since the client reported it.
It seems this started when her iPhone6 was upgraded to iOS 9.1 about a month back. She has also had other people report it to her so it is not just the one phone.

To answer your questions: - yes it happens on every page on the site.
I will see if I can setup a time to try disabling the plugins and have the client check. The ones I have added are Akeeba Backup, Ignite Gallery, SH404SEF and RSForms. Added jquery Easy after the problem occurred to see if it would help.

Thanks

Hi Ciaran,
Some more information for you.
I disabled most of the plugins - no change.

What I have discovered is that the homepage works and displays the content. This uses a different template.

In looking at the difference between the Homepage and the default templates, I added some custom code to the default template to solve a display issue I was having. Found the code from one of your recommendations here on the site and it did solve my initial problem. This is the code:

h2,h3,h4,h5 {

  color: #6b1d20;

}

#header, #header_slide {

    height: 150px;

}

.maincontent {

    padding: 20px 35px;

}

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

    #main {

        display: flex;

        flex-direction: column;

    }

    .sidecol_a, .sidecol_b {

        order: 1;

    }

}

Thanks.

Thank you Frank

This is a great help and thank you for sharing. It seems the issue is related to the initial method used by the template to display the sidecolumn modules below your content on mobile devices. Flex used in the above CSS will be the method for this in the future however due to a small percentage of old browser still unable to support it we had continued to use the old method. From your above post it sounds like a 2 pronged approach will work for the time been which we are currently looking in to.

Ciarán

Hi Ciaran,
I can confirm that taking out the @media flex part of the CSS solved the issue with the display.

The challenge is now to get those side columns modules to display below the content.
If there is no easy way to do this currently, is there a way to prevent them from showing completely? (On smaller resolution devices).

Thanks.

Hi Frank

May I suggest sending temporary administration access to your Joomla installation to info@joomla51.com and we will try and set up an alternative solution for re orderings your component / sidecolumn areas. For our reference please paste a link to this post in your email.

Ciarán

Login information sent.

Hi,
Same problem here with Enlighten template.
display: flex; causes don't show the content in Safari, also in desktop version.
Any solution?

Thanks

Luis

Hi Luis

May I suggest sending temporary administration access to your Joomla installation to info@joomla51.com and we will examine this issue further. For our reference please paste a link to this post in your email.

Ciarán

Hi Ciarán,
Administrative access sent

Thanks!!

Luis

Thank you Luis

To amend we have used a slightly different approach which is working without issue across all devices. We have added the following to the Custom CSS field of your templates parameters...

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

  #main {

      display:table;

  }

  #content_remainder {

  	display: table-row-group;

    	float: none;

	}

  .sidecol_a, .sidecol_b {

      display: table-footer-group;

    	float: none;

  }

}

Ciarán

Hi Ciarán,
Thank you very much for the solution! It works perfectly.

Sláinte!

Luis

... ... offtopic: I know Mullaghmore and Sligo county, and I think you are very lucky to live in such a beautiful place.

Thank you Luis

Beautiful on those few good days, although on rainy days like today i think the ducks enjoy more than we do!

Ciarán