Problem getting site mobile ready

Alan_OldStudent · #1 Jul 26, 2015, 03:01 AM

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":

Code:

body onresize="OnResizeDocument()"

. 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

juggledad · #2 Jul 26, 2015, 10:22 AM

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

Alan_OldStudent · #3 Jul 26, 2015, 12:39 PM

Quote:

Originally Posted by juggledad

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

juggledad · #4 Jul 26, 2015, 01:15 PM

Export your settings and attach to a reply

Alan_OldStudent · #5 Jul 26, 2015, 04:01 PM

Quote:

Originally Posted by juggledad

Export your settings and attach to a reply

Thanks JD. Here they are.

Regards,
Alan

juggledad · #6 Jul 26, 2015, 05:10 PM

Your settings work fine for me and on your site, on the 'body' statement, I don't see the

HTML Code:

onresize="OnResizeDocument()"

Body statement on your site

HTML Code:

<body class="home blog">

on my site with your settings imported

HTML Code:

<body class="home blog"  onresize="OnResizeDocument()">

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.

Alan_OldStudent · #7 Jul 28, 2015, 06:02 PM

Quote:

Originally Posted by juggledad

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

Alan_OldStudent · #8 Jul 29, 2015, 09:28 PM

Quote:

Originally Posted by juggledad

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

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

juggledad · #9 Jul 30, 2015, 03:32 AM

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

Quote:

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.

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.

Alan_OldStudent · #10 Jul 30, 2015, 04:17 PM

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

Whooray! Thanks to all for your help!

Regards,
Alan