-
AuthorPosts
-
December 27, 2013 at 8:36 am #4472
John Marshall
GuestMy 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 #4474Ron
KeymasterWhat 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 #4499John Marshall
GuestThe 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 #4503Ron
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 #4510John Marshall
GuestI’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 #4511John Marshall
GuestI 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 #4516Ron
KeymasterI 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 theheader.php
file
Delete this line which is near the top<meta name="viewport" content="width=device-width" />
December 31, 2013 at 9:13 pm #4566John Marshall
GuestThis 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 #4567Ron
KeymasterI’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 #4569John Marshall
GuestI 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 #4570Ron
KeymasterAsteroid 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 #4575John Marshall
GuestI’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!
-
AuthorPosts
- The forum ‘Asteroid’ is closed to new topics and replies.