I'm trying out the "mobilization" on this site on my dev server:
http://todddawsondesign.com/test/tdd-matia-ngtest/
Compare to original site at http://matia.com/

I lost the footer throughout the site (even with turning off all my plugins).

When I compress the viewport, the phone and email stack on top of the header image. Also the search box has disappeared.

Thoughts?

Go to the header config, middle area and footer section and hit the big green SAVE button

Thanks-that helped.

Somehow all the widgets in the footer got stripped out... I've replaced them, but I'm getting the "Powered by WordPress and Atahualpa" line under the copyright. My browser inspector shows it as an additional line following a <br />, but that does not exist in the copyright line. Is it controlled somewhere I don't know about? I've looked everywhere and can't find it.

Also missing the search box in the header. Ideas?

I'm getting the "Powered by WordPress and Atahualpa" line under the copyright.

see: http://forum.bytesforall.com/showthread.php?t=2091

Also missing the search box in the header. Ideas?

it's not missing, it is just way off to the right - I think the positioning is 'absolute' - Play with your css to move it.

Tried to remove the "Powered by..." via ftp; didn't work. But it did work in the site editor. Go figure.

The search box appears when I log out.

Thanks!

Originally Posted by juggledad

Try this
1) add the following to ATO->Add HTML/CSS Inserts->HTML Inserts: Header

<meta name=viewport content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

2) move your image out of the theme/atahualpa/images/header folder - you can put it in the media library or create a new folder in the wp-content folder ad put it there
2) at ATO->Style & edit HEADER AREA->Configure Header Area - remove teh %image and replace it with

<img class="img-responsive" src="http://yourdomain.com/...path-to-the-image.../header-new.jpg" width="753" height="369" /> %pages

you'll probably need to do some centering of the image, but I'll leave that as an exercise for you.

Juggledad when I used this code, my header image went responsive but it messed up everything else in the site (font size, color, headers' settings etc).

When I removed it everything turned the way it was... Am I doing something wrong?

I'd say you are, but there's no way for me to tell what it is from the information you've given.
Did you disable all your plug-ins to see if one of them is affecting it?
Do you have any other entries in the CSS inserts that might be affecting it.

I would export you're Atahualpa settings so you have a copy. Then I would reset each page of options back to the defaults to see if that effects your problem. Once you find the issue, you can reimport the settings and correct the issue.

Just finished a site with WooCommerce and a fixed width. I am terrified to do this. My customers are going to a trade show tomorrow so I do not dare tamper with it at this late date. I should have thought of this BEFORE I started, darn it.

In the meantime, I am looking at a plugin called Woofluid for Woocommerce sites.

Hello,

I have added the above inserts to a new site https://vivbounty.info/thosbartlettsample/ and tested on my mobile, but find all parts responsive except my header which is 990px. _ EDIT... Got this work reading further down the thread, but now have gallery widget problem, so going to slideshow plugin creator to try to fix.

When I run the Mobile-Friendly test I get the following response:
"Clickable elements too close together" --- AM NOW mobile friendly, thanks but still have to fix slideshow.

Any ideas and help most appreciated.

Thanks

Where is the slideshow? I don't see anything odd on my iphone

Hello oh gurus of Atahualpa Theme. Thank you so much for this forum and all your help in the past and in advance of this post.

I followed this tutorial and managed to make this site I'm creating for a customer mobile friendly.
https://vivbounty.info/thosbartlettsample/

I then created a second site here: https://vivbounty.info/tboa-2/gallery because I wanted the gallery page to have menus at the top. To do this I created a table put in a dynamic widget under the header. My header now does not display. In addition the widget because it was not created with the dynamic widget creator, I suppose, does not respond to the mobile display.

Can you help me only show the menu widget only on the gallery page and let the right sidebar widget show on all other pages? At the moment I have the horizontal menu widget showing on all pages and cannot figure out how to only show it on gallery page. The right sidebar widget is also showing on gallery page even though I have set it not to show on page #27.

I await kind assistance with humble gratitude.

Thanks so much,
Viv

Sorry for delayed response, JD.

Slide show is on home page here: https://vivbounty.info/thosbartlettsample/

It appears to be displaying correctly on my laptop and mobile.

Thanks so much.

Viv

So are you saying your issue is fixed?

Hi JD,

The first issue on https://vivbounty.info/thomasbartlettsample/ is fixed for the most part except that now the custom ZAPFINO font does not translate to mobile. Can this be fixed?

The second site is just a mess with those widget issues and losing my header:

I then created a second site here: https://vivbounty.info/tboa-2/gallery because I wanted the gallery page to have menus at the top. To do this I created a table put in a dynamic widget under the header. My header now does not display. In addition the widget because it was not created with the dynamic widget creator, I suppose, does not respond to the mobile display.

Can you help me only show the menu widget only on the gallery page and let the right sidebar widget show on all other pages? At the moment I have the horizontal menu widget showing on all pages and cannot figure out how to only show it on gallery page. The right sidebar widget is also showing on gallery page even though I have set it not to show on page #27.

I await kind assistance with humble gratitude.

Thanks so much,
Viv

Hi JD. Created long involved post about this site and the ZAPFINO font not responding to mobile, which is still an issue, but as that post has still not been approved by moderator (only added this morning), I now feel that 2nd site is corrupt so will uninstall and re-start https://vivbounty.info/tbao-2/ as all my pages are being renamed -2, i.e. gallery-2, schedule-2 and my header is now replaced with a error 404 page.

Kindly have a look at https://vivbounty.info/thosbartlettsample/ re: custom font not showing on mobile and ignore any reference to /tbao-2 site for now.

Apologies for all confusion. Await solution if any to custom font for /thosbartlettsample/

Humble gratitude,
Viv

If you want a font to change on smaller screens will have to add media specific css sizes, For the text

Representing 37 antique dealers and committed to offering quality merchandise at reasonable prices.
Shop Hours: 10-4
7 days a week
Closed Easter Sunday,

that is in the sidebar, it is part of the text widget so you would need something like

@media only screen and (max-width: 767px) {
  #text-3 .textwidget {
    font-size: .5em;
  }
}

Ths is where you need to learn how to use a tool like FireBug in Firefox so you can examine the element you want to change and test teh changes.

Thanks so much, JD. That's a great help.

So appreciate it.

Hello again, JD.

https://vivbounty.info/thosbartlettsample/

Have now added a dynamic widget at bottom of center column

<?php bfa_widget_area('name=Center bottom widget area&cells=5&width_1=206&width_2=206&width_3=206&w idth_4=206&width_5=206'); ?>

This is not responding in mobile. Is there additional css code to cause this to respond to mobile browser?

In addition is there a way to have this widget only display on gallery page (https://vivbounty.info/thosbartlettsample/gallery/? For all other pages I have right sidebar with menu.

Thanks so much for help.

EDITED March 22 1:04 AM - I have now edited the widget in the footer so that it responds to mobile. Yay!! Now I just have to figure out how to show it only on gallery page. I've read thread where someone wanted to hide a header widget from all but one page, but I did not manage to translate that to my widget. Please help. Thanks in advance.

use a plugin like 'widget logic' or 'visual widget logic'

Thanks, will try that, JD.

I was just trying to have as few plugins as possible for these non-techhy clients who will then run their own site after it's up.

Installed widget logic now. Thanks.

Yes, yes, yes, JD.

That so worked! Thanks so much.

I was resisting installing another plugin because in the long thread of making ATA themed site pass Google's mobile friendly test, you said to someone, "If this works and saves you dealing with another plugin...", and I could not get that out of my head.

We're off and running now. How fantastic is this.

Yay!!!!

Hey JD - Hope you're well! Been a while since I've dug into my site's code and hoping you can help. I've installed all the responsive code you graciously provided and I'm passing mobile Google's test but trying to figure out how to make my search box widget show up under my menu on mobile instead of at the bottom of the page. I tried installing Responsive Menu plugin but I couldn't get that working at all so abandoned that effort. Site is www.tayloreason.com
Running WP 4.7.5 + ATA 3.5.4

The new code also doubled the size of the font on the page, which looks pretty bad on the desktop version (Chrome). Any advice there?

Thanks,
Taylor

see the PM I've sent you.

Thanks JD!

This has ended a solid year of frustration for me.

Much appreciated.

Many thanks for this. It produces a nice result on my site and enables it to pass the Google mobile test. I have just one small problem. The content of my sidebar now appears at the bottom of the page -- which is fine. However, the images from the sidebar (logos, thumbnails) are very large. This isn't really an error, since the images are re-sized relative to the screen just they were to the sidebar (ones that took up 100% of the sidebar take up 100% of the screen; ones that took up 50% take up 50%, etc), but they are distractingly large. Can you tell me, please, if there is a simple way to reduce them all to a smaller, standard size -- or alternatively, to replace them with text placeholders?