Joomlabamboo Support Forum :: Topic: Template does not show properly on iPhone Retina displays (1/1)

Please note that this forum is only available to you in read only mode. In order to contribute to this conversation you will need to renew your subscription.

Template does not show properly on iPhone Retina displays

If you use Zentools please post a review at the Joomla! Extensions Directory.

8 years 4 months ago

I am in dire need of help for a client. For the life of me I cannot get this template to show properly on an iphone 5 or higher. It is showing a sliver version of the site. I have made media query changes and a gazillion other css @media override attempts to no real good solution. Am I missing something, an easy button maybe, in this "ready" for mobile template? I love what you guys offer I just need some assistance on this one, Thanks!!!

Isaac Corey
3 Month Basic
9 posts
Karma: 0

The administrator has disabled public write access.

8 years 4 months ago

Hi

What is the link for the site?

Cheers
Paul

manh
Moderator
45248 posts
2106 Thanks
Karma: 603

The administrator has disabled public write access.

8 years 4 months ago

www.punchoutgaming.com

Isaac Corey
3 Month Basic
9 posts
Karma: 0

The administrator has disabled public write access.

8 years 4 months ago

Can I just check

"It is showing a sliver version of the site."

What does this mean?

Thanks
Paul

manh
Moderator
45248 posts
2106 Thanks
Karma: 603

The administrator has disabled public write access.

8 years 4 months ago

Isaac Corey
3 Month Basic
9 posts
Karma: 0

The administrator has disabled public write access.

8 years 4 months ago

You've disabled the custom css to see if this is caused by any of your additions?

manh
Moderator
45248 posts
2106 Thanks
Karma: 603

The administrator has disabled public write access.

8 years 4 months ago

Yes I did. I will do it again to see though.

Isaac Corey
3 Month Basic
9 posts
Karma: 0

The administrator has disabled public write access.

8 years 4 months ago

Same pixel ratio issue - it just does not want to load as it should for mobile.

Attachments:

pog-iphone...-css.jpg (103KB)

Isaac Corey
3 Month Basic
9 posts
Karma: 0

The administrator has disabled public write access.

8 years 4 months ago

This is how it appears on all other devices outside of Retina screens or other high res small screens

Attachments:

pog-mobile...ices.jpg (56KB)

Isaac Corey
3 Month Basic
9 posts
Karma: 0

The administrator has disabled public write access.

8 years 4 months ago

I will need to ask a developer about this I'm afraid - I'm not sure

I can see an issue with

.responsive-enabled {
width: 100% !important;
}

that is causing horizontal scroll bars on the desktop but don't think that is the issue mobile wise

Cheers

manh
Moderator
45248 posts
2106 Thanks
Karma: 603

The administrator has disabled public write access.

8 years 4 months ago

Hi there,
This was actually a change in ios9. The solution on this page should fix the issue for
you:

www.joomlabamboo.com/index.php?option=com_kunena&view=topic&catid=516&id=115521&Itemid=215

Thanks

Anthony Olsen
LIfetime Developer - Big Bamboo
23925 posts
788 Thanks
Karma: 433

The administrator has disabled public write access.

The following user(s) said Thank You: Isaac Corey

8 years 4 months ago

This did help fix the problem - going to do some more testing. Thanks again for you prompt attention, great service.

Isaac Corey
3 Month Basic
9 posts
Karma: 0

The administrator has disabled public write access.

8 years 4 months ago

Thanks I'll pass that on

Cheers
Paul

manh
Moderator
45248 posts
2106 Thanks
Karma: 603

The administrator has disabled public write access.

8 years 4 months ago

I am now experiencing a different issue on the same devices. The sidebar 1 position is overlapping the content and making it impossible for people to purchase as it overlays the items. It should stack beneath the content, it does so on other devices.

Isaac Corey
3 Month Basic
9 posts
Karma: 0

The administrator has disabled public write access.

8 years 4 months ago

Hi there,

This relates to the equal height script we used in the default version. I'm not entirely sure why it's behaving like that on your site but since you don't need it because you changed the design you can remove that code:

1. Go to templates/gazetta/js/scripts and remove this code:

$('a,h3,span,img').click(function() {
	 		setTimeout(function() {
	 			$('#midCol,.sidebar').matchHeight();
	 		}, 700);	
	 	});

2. Go to tpls/blocks/scripts.php and locate this at the top of the file:

jQuery(document).ready(function($){
					$("<?php echo $this->params->llselector; ?>").not("<?php echo $this->params->llnotselector; ?>").lazyload({
						effect : "fadeIn",
						
						appear : function(elements_left, settings) {
						     $('.sidebar, #midCol').matchHeight();
						}
				});	});

and change it to this:

jQuery(document).ready(function($){
					$("<?php echo $this->params->llselector; ?>").not("<?php echo $this->params->llnotselector; ?>").lazyload({
						effect : "fadeIn"
				});	});

3. In your settings/assets.xml file remove the line referencing equal heights:

../zengrid/libs/zengrid/js/jquery.matchHeight-min.js

Then make a note of these changed files as when you update the theme it may overwrite these changes.
Hope this helps.
Anthony

Anthony Olsen
LIfetime Developer - Big Bamboo
23925 posts
788 Thanks
Karma: 433

The administrator has disabled public write access.

8 years 4 months ago

Anthony, thanks for you assistance on this issue. Removing the following code removes all content from the site unfortunately.

appear : function(elements_left, settings) {
						     $('.sidebar, #midCol').matchHeight();
						}

I am perplexed and have a very upset client. Nothing I have tried seems to work. Please let me know if you have any other ideas. I removed all overrides and it tested the same.

Thanks

Isaac Corey

Isaac Corey
3 Month Basic
9 posts
Karma: 0

The administrator has disabled public write access.

8 years 4 months ago

Hi if you left the trailing comma it will break the lazyload function that delays the loading of images. The code should look like this:

jQuery(document).ready(function($){
					$("img").not(".none").lazyload({
						effect : "fadeIn"					
						
				});	});

Is that what you had?

Anthony Olsen
LIfetime Developer - Big Bamboo
23925 posts
788 Thanks
Karma: 433

The administrator has disabled public write access.

If you use Zentools please post a review at the Joomla! Extensions Directory.

Template does not show properly on iPhone Retina displays

Happy Campers