iPhone mobile view issues

The mobile view works great and I can write extensive media queries to modify the site. However, what I see on the screen is not what I see on iPhone X. Some sections are spilling off the screen by 5 or 10px. and the font size is also all over the place. I’m mainly using Flexbox to write pages in Content Area because it’s easier to control and build complex layouts. The last page I built had no iPhone issues but it was one Content Area box in one Section, which is slow to work on. The current page is sectioned. There’s no pattern that I can see.

Hey @robsonfinancial,

I checked all the pages in your site’s menu in iPhone X screen size and everything are aligned except for the Facebook slider in your home page which is powered by a third party plugin.

Would you mind giving us the exact page URL and also a screenshot of what it looks in the builder and in iPhone X.
Please also tell us if it’s only happening in a real iPhone X device or it can be replicated using the browser responsive viewer. If it’s only in real iPhone X device, please tell us the OS version and browser name and version. If you haven’t updated to the latest OS and browser version, please also test the latest versions.

And, also check the zoom level of your browser.

Thanks.

Hey @robsonfinancial,

I found that that issue is not coming from the Content Area nor anything in our theme. It’s because of how your custom HTML was composed. For instance, you have 400px width for your custom container.

Notice that in the screenshot above, I even moved your custom HTML outside the Content Area yet the issue persists.

Regretfully, we do not have support for custom HTML so please instead use the features of the Content builder. If you wish to continue writing custom HTML, please consult with a third party developer.

I’d would like to take this opportunity though to let you know that more layout options are coming to our builders so it will open more layout possibilities in the future. Please see https://theme.co/apex/forum/t/status-report-may-1-2019/57564

Thanks.

Thanks. There were errors in the HTML. Now fixed and working properly. On a separate matter, is there a javascript fix to achieve smooth accordion toggle? I tried a coupe of fixes mentioned in other threads but none worked. Where the accordion text is more than one line, it’s jumpy.

Hey @robsonfinancial,

I tested your accordion elements and It seems to be working fine, there are no jumps on my end. You can however add the following script in the Theme Options > JS:

jQuery( function($) {
	$('.x-accordion-heading a').on('click', function( e ){
		setTimeout( function() { 
			$('html, body').stop().stop();
		}, 100 );
	});
	$(document).ready(function() {
		$('.x-accordion-heading a').off('click touchstart touchend');
	});

});

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

The code had no effect. When accordion only has one line of text, it eases in. With a block of text it eases past the first line and accelerates. It could be soother. I’ve tried it in various browsers. The only custom java I’ve got on the page is the FB share button. I’m using the shortcode not the element.

Further info… the element works perfectly. Can I get the same experience with short code?

Hi @robsonfinancial,

In that case, please use the element itself within the global block, then use that global block within your content area as a shortcode. Please check it here https://theme.co/apex/forum/t/global-blocks/24723

Your shorcode is different than element and there is no available shortcode for that, but you can use global block where the element is added.

Thanks!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.