Search code examples
phphtmlwordpressmapboxmobile-browser

Why is my Wordpress page suddenly not mobile-friendly?

I have a Mapbox Map on a Github hosted site that mirrors onto a Wordpress site. The Wordpress mirror is not displaying on mobile how it should, it's very tiny and hard to read, as if it's showing the desktop version, but the original site displays correctly. Side-by-side comparison of maps Original: http://jfact0ry.com/theRIDE/

Mirror: http://ridesitka.com/map/

I made this map for a local transit agency. Their website is hosted on a Wordpress.org site. I used an iframe page with this as the template for wordpress: (credit to Sup-a-Dillie-O

<?php
/**
    Template Name: Content Only
*/
?>
<html>
<head>
   <title><?php wp_title( '|', true, 'right' ); bloginfo('url'); ?></title>
   <style>
       html,body,div,iframe {height:100%;}
       p {position:relative;overflow:hidden;}
       iframe {border:none;width:100%;}
       body {margin:0;padding:0;}
   </style>
</head>

<body>
      <?php while (have_posts()) : the_post(); ?>
      <?php the_content(); endwhile; ?> 
</body>
</html>

This is the full html for the site theRIDE/index.html

What is it that would make this load in Wordpress differently? What do I need to change to make it mobile-friendly?

Thank you.

EDIT: changed url of image

Solution

  • In your <head> section, you're missing this:

    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">

    This sets the scale right.

    This one works

    Correct

    This one doesn't

    Incorrect