Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme »

Problem getting site mobile ready


  #1  
Old Jul 26, 2015, 03:01 AM
Alan_OldStudent's Avatar
Alan_OldStudent
 
46 posts · Oct 2013
Northwest United States
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
  #2  
Old Jul 26, 2015, 10:22 AM
juggledad's Avatar
juggledad
 
23,682 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
did you actually include the word 'body'? if so, remove it.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Jul 26, 2015, 12:39 PM
Alan_OldStudent's Avatar
Alan_OldStudent
 
46 posts · Oct 2013
Northwest United States
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
  #4  
Old Jul 26, 2015, 01:15 PM
juggledad's Avatar
juggledad
 
23,682 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Export your settings and attach to a reply
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #5  
Old Jul 26, 2015, 04:01 PM
Alan_OldStudent's Avatar
Alan_OldStudent
 
46 posts · Oct 2013
Northwest United States
Quote:
Originally Posted by juggledad
Export your settings and attach to a reply
Thanks JD. Here they are.

Regards,
Alan
Attached Files
File Type: txt Local-settings-ata-localhost-20150726.txt (16.9 KB, 431 views)
  #6  
Old Jul 26, 2015, 05:10 PM
juggledad's Avatar
juggledad
 
23,682 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #7  
Old Jul 26, 2015, 08:30 PM
Alan_OldStudent's Avatar
Alan_OldStudent
 
46 posts · Oct 2013
Northwest United States
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??
  #8  
Old Jul 27, 2015, 03:13 AM
juggledad's Avatar
juggledad
 
23,682 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Quote:
Should the side bars be pushed down into the bottom of the screen?
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.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #9  
Old Jul 28, 2015, 06:02 PM
Alan_OldStudent's Avatar
Alan_OldStudent
 
46 posts · Oct 2013
Northwest United States
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
  #10  
Old Jul 28, 2015, 06:46 PM
juggledad's Avatar
juggledad
 
23,682 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #11  
Old Jul 28, 2015, 07:24 PM
Alan_OldStudent's Avatar
Alan_OldStudent
 
46 posts · Oct 2013
Northwest United States
Quote:
Originally Posted by juggledad
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?

Attached Thumbnails
Click image for larger version

Name:	ata-2015-07-28_18-21-17.jpg
Views:	378
Size:	61.2 KB
ID:	2709  

Last edited by Alan_OldStudent; Jul 28, 2015 at 07:58 PM.
  #12  
Old Jul 28, 2015, 11:24 PM
Alan_OldStudent's Avatar
Alan_OldStudent
 
46 posts · Oct 2013
Northwest United States
Quote:
Originally Posted by juggledad
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.
Here's a screen shot from what I see when I right-click in Firefox and select "view page source" from the context menu.

Attached Thumbnails
Click image for larger version

Name:	2015-07-28_22-17-38_B.jpg
Views:	371
Size:	111.2 KB
ID:	2710  
  #13  
Old Jul 29, 2015, 01:42 AM
cefiar
 
24 posts · Jun 2014
Melbourne, Australia
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.
  #14  
Old Jul 29, 2015, 02:02 AM
juggledad's Avatar
juggledad
 
23,682 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #15  
Old Jul 29, 2015, 08:57 PM
Alan_OldStudent's Avatar
Alan_OldStudent
 
46 posts · Oct 2013
Northwest United States
Quote:
Originally Posted by cefiar
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.
Thanks Cefiar
  #16  
Old Jul 29, 2015, 09:28 PM
Alan_OldStudent's Avatar
Alan_OldStudent
 
46 posts · Oct 2013
Northwest United States
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
  #17  
Old Jul 30, 2015, 03:32 AM
juggledad's Avatar
juggledad
 
23,682 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #18  
Old Jul 30, 2015, 04:17 PM
Alan_OldStudent's Avatar
Alan_OldStudent
 
46 posts · Oct 2013
Northwest United States
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
Attached Thumbnails
Click image for larger version

Name:	2015-07-30_15-09-52.gif
Views:	394
Size:	7.5 KB
ID:	2711  

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
problem with estore on mobile version of site mhagenow eCommerce & Atahualpa 9 May 2, 2015 06:13 PM
How do i stop the site resize / mobile version Tommyt Montezuma Theme 12 Feb 4, 2013 06:58 PM
Mobile Sidebar problem Context Canada Center area post/pages 1 Mar 1, 2012 02:46 PM


All times are GMT -6. The time now is 11:23 PM.


Powered by vBulletin® Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.