Mobile optimisation broken

Support
#1

Hey,

Just need some mobile optimisation help. I’m currently testing our new website on mobile which should be launching on wednesday. When I view majority of websites on my mobile phone (tested on apple & android) I am under the impression I shouldn’t be able to fully pinch zoom out of a website. However on our website we can do that, is this something we’ve done wrong? We can also scroll side to side on it too.

#2

Hi @hannahlincoln,

Thanks for reaching out.

I just tried it and I can only zoom it in, can’t zoom it out. What IOS and browser version you’re testing it with?

For the meantime, please install a child theme to your site and add this _meta.php to the folder /wp-content/themes/pro-child/framework/views/global/ with this content

<?php

// =============================================================================
// VIEWS/GLOBAL/_META.PHP
// -----------------------------------------------------------------------------
// Outputs meta data into the <head> of the site.
// =============================================================================

?>

<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<title><?php wp_title( '' ); ?></title>
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">

Though, that also disables the zoom in, which may affect the usability especially for people having a hard time reading on phones.

Thanks!

#3

Hi Rad,

Thanks for getting back to me.

I am using IOS 11.4.1 using an up-to-date Safari browser.

I think you should be able to replicate it on the blog page https://test2.itassolutions.co.uk/sage-blog/

I have tested it on 10 devices within our office using a mix of apple and android and each one is getting the same issue. I am seeing it worse on that page but subtley on all pages (moving side to side and ability to zoom out just not as far as the blog page)

Thank you

#4

Hi @hannahlincoln,

Thanks, seems okay on my end. But this looks similar to the previous issue related to pseudo selector. Please add this CSS to your global custom CSS.

@media ( max-width: 979px ) {
.x-content-sidebar-active .x-container.main:before, .x-sidebar-content-active .x-container.main:before {
display: none !important;
}
}

Hope this helps.

#5

Thanks Rad that seems to have solved it! Really appreciate your help.

#6

Glad we were able to help you :slight_smile:

#7

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