Problem getting site mobile ready
 

I downloaded and restored my site to a WAMP server on my Windows 7 desktop computer. I then put in the code that JD suggested. In addition, I added this to the "HTML Inserts: Body Tag":
. I then compared the live site to the local site in a webpage that supposedly shows how something will look on an iphone here: http://www.responsimulator.com/.

The live site looked illegible on the emulator. The local site had text large enough to read in the emulator, but the side bars were pushed down to the bottom of the page. Is this normal behavior? I don't normally browse the web on my little iPhone 5c. I like to look at the web on my desktop (I know, so 2000s!).

I don't know how much confidence I can have in the emulator, because my live site in the emulator looks different than it does on my actual physical iPhone. When I try to look at the live site in Safari on my iPhone 5c, it looks the same as it does on my desktop, but the print is way too small to read.

This is the link to my site: http://15nowtacoma.info/

Regards,
Alan

did you actually include the word 'body'? if so, remove it.

I took the word "body" out and put in one space in its stead. I still get the same results.

I also wonder about the emulator that supposedly gives an accurate preview of how it will look on a device. There seem to be a whole bunch of them. Is there one which is particularly reliable?

I'm hesitant to go-live until I feel confident I don't have to go back. I already have a bunch of code in the live site.

Alan

Export your settings and attach to a reply

Thanks JD. Here they are.

Regards,
Alan

Your settings work fine for me and on your site, on the 'body' statement, I don't see the Body statement on your site
on my site with your settings imported
so there is something different.

First step is to disable ALL your plugins and then view the site. Use the browsers 'view source' stement and find the Body statement. If the 'onresize...' shows up, then you know one of the plugins is at fault so you can turn them on one at a time and check the source till you find the culprit.

Hi JD,

What you saw was the live site, not the one on my local WAMP. I got the settings from that one.

Should the side bars be pushed down into the bottom of the screen? Do you know if there is a decent iphone emulator that I can run on my Windows 7 desktop computer??

yes, that is the idea of the site being responsive. The iPhones/iPads normally shrink the whole page while other devices show the whole page but you have to scroll left and right to see it. Being responsive means only having to scroll up and down to see the content. To do that, the side bars are eithor removed all together or pushed to the bottom below the content.

You should play with some other themes on your local server to see hw they react so you can see how it is done.

I imported the settings from my local WAMP installation of my website and pasted them into the live site. I then ran the site through the emulator mentioned above, and it seemed to pass muster there. Then, I ran it through the Mobile-Friendly test and it dinged the site. Parts of the reasons given I had trouble understanding.

When I tried to look at it on my iPhone 5c, it looked identical to what I had seen before the big change.

Would people mind looking at my site on their devices and let me know how it looks?

Thanks,
Alan

it's still not showing the 'onresize="OnResizeDocument()"' in teh body statement. Go to the 'Add HTML/CSS options and see if it is there.

It's there. Could it have been the space in front of the statement?

http://forum.bytesforall.com/attachm...1&d=1438132988

Here's a screen shot from what I see when I right-click in Firefox and select "view page source" from the context menu.

http://forum.bytesforall.com/attachm...1&d=1438147322

Definitely looks to be there now, and seems to work on my mobile (Samsung Galaxy S3 with Google Chrome).

That said, there's a few things that aren't fitting in the width.
Search box
Posts/Comments links

Note: All this does is resize your site for mobile, and move all sidebars to the end of the page. The idea is that on a phone you only want the user to scroll vertically, not horizontally.

yup now I see it too - maybe it was a caching issue. On teh iPhone ou still have an issue with the header
1) your logo is too small to see
2) the the rss feeds and search are partway off the right of the screen

Thanks Cefiar

Before I attempted to make the entire site mobile friendly using the code in this thread, I had already made changes to make the background scalable. I got the code to accomplish that from this thread and the extensive discussion.

Additionally, before adding the code to make the entire website more responsive and able to pass Google’s mobile test, I had also inserted code to make the header scalable. I took code to make the header more scalable from a series of posts about this. I jumped into the middle of that thread, and my first contribution to the series to do that starts here.

I hope all these changes aren’t too much of a kludge.

Now, JD and Cefiar tell me that the logo is too small to see and that the search bar and post/comments links are off to the side. JD also says the RS feeds are off the right of the screen.

So given all that, here are my questions:

• First of all, I am unaware of any RS feed items on my webpage. I’m not real up-to-date on exactly what they are.
• Second of all, how can I fix the size of my search bar and logo so that it continues to show up in my desktop monitor but also are mobile friendly?

Once again, for your convenience, this is the website I'm talking about.

Regards,
Alan

NOTE: I've moved this all to a new thread

sorry, I shouold have said the RSS subscription icons -ie the 'Post' and 'Comment icons above the search box in the upper right of the header.

Well, I just ran the site through the Mobile Friendly test, and this is what came up:

http://forum.bytesforall.com/attachm...1&d=1438294585

Whooray! Thanks to all for your help!

Regards,
Alan