Asteroid Not responsive for iPad and iPhone

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • December 27, 2013 at 8:36 am #4472
    John Marshall
    Guest

    My website is no longer responsive for iPad and iPhone. I updated to the latest WordPress version as well as your latest version of Asteroid a few days ago(both updates the same day), but just noticed yesterday the problem with the iPhone and iPad screen format).

    December 27, 2013 at 10:01 am #4474
    Ron
    Keymaster

    What do you mean specifically? The entire page doesn’t follow the device screen’s width or maybe there’s just an element on the page that does not resize?

    December 28, 2013 at 9:25 pm #4499
    John Marshall
    Guest

    The entire page does not follow the device screen’s width. On an iPad only the left part of the header shows. The posts are visible below, but you do not see the sidebar until you have scrolled down through the posts. On my iPhone you only see part of the header, then the menu items are in vertical format all across the page. I thought maybe reinstalling your latest update might fix it, but I cannot see where I an do this.

    December 29, 2013 at 3:34 am #4503
    Ron
    Keymaster
    • Sidebar goes under on smaller screen sizes.
    • Menu items stacked vertically on smaller screen sizes.

    These actually indicate that the page is responsive. The only issue I think is the header background image being cut off. You’re using the header background image for content that might be better suited for a logo similar to what is done on this site.

    If you want to force the header image to fit, you can add this on Asteroid Options -> Custom CSS

    #header {
    background-size: 100% 100% !important;
}

    Or you could remove the header image then use the same image for the logo which you could set on Asteroid Options -> Appearance Then add the css below on the Custom CSS tab.

    #header {min-height: 0;}
#header-info-wrap,
#header-logo img {
    float: left;
    height: auto;
    max-width: 100%;
}
    December 30, 2013 at 7:44 pm #4510
    John Marshall
    Guest

    I’ll try the first css option, but the web pages used to fit just like they do on a computer, just smaller. I could resize with my fingers to zoom in on content. I don’t understand the sudden change.

    December 30, 2013 at 10:20 pm #4511
    John Marshall
    Guest

    I tried both of these options with no change in the header image on iPad and iPhone. The second option only deleted my header completely. I used copy/paste to insert the custom CSS codes. There are a number of multiple spaces in the code. Should I delete the spaces?

    December 31, 2013 at 3:57 pm #4516
    Ron
    Keymaster

    I could resize with my fingers to zoom in on content. I don’t understand the sudden change.

    Looking at a google cache of your page I see that you updated to version 1.1.5 from version 1.0.9 which was submitted many months ago.

    Since that version, a line of code was added to actually make the theme responsive similar to other themes on wordpress.org

    If you like to disable that behavior you have to remove that single line on header.php

    Go to Dashboard -> Appearance -> Editor then select the header.php file
    Delete this line which is near the top

    <meta name="viewport" content="width=device-width" />
    December 31, 2013 at 9:13 pm #4566
    John Marshall
    Guest

    This is what that section looks like after I deleted the line, but the web pages still do not appear on my iPhone and iPad the way they did in the version 1.0.9:

    <meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php wp_head(); ?>
    December 31, 2013 at 9:55 pm #4567
    Ron
    Keymaster

    I’m still seeing the supposedly deleted line when I view your page’s source. I see that your caching plugin is enabled. Try to clear the plugin’s cache so the changes are shown.

    January 1, 2014 at 8:31 am #4569
    John Marshall
    Guest

    I checked it later today and it looks fine now.

    My personal preference for websites is for them to look the same as they do on a laptop or desktop monitor. I don’t think people should have to learn a whole new layout for each device. We have enough website layouts to learn as it is. Why multiply it by having two or three versions of each one to “fit” various devices.

    This may be necessary for some websites, but for this one, no.

    Just my opinion.

    Thanks so much for your time.

    January 1, 2014 at 9:50 am #4570
    Ron
    Keymaster

    Asteroid has always been intended to be a responsive theme. Having the ability to adapt to different screen sizes is what means to be responsive. I’m just following web development standards and responsiveness is basically the standard nowadays. It is actually a popular feature so I guess a lot of people prefer it to be that way.

    Anyway, I think I’ll just add an option to be able to disable responsiveness on the next version. This function is available on my other theme but is left out on Asteroid which is meant to be a really simple theme.

    Thanks so much for your time.

    You’re welcome. Happy new year!

    January 1, 2014 at 8:33 pm #4575
    John Marshall
    Guest

    I’m still fairly new at this, so I thought responsive meant it just resized for each device. The option to disable it on Asteroid as well would be great. Then I don’t have to edit the css every time there is an update.

    Happy New year!

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The forum ‘Asteroid’ is closed to new topics and replies.