Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Atahualpa 3 Wordpress theme (http://forum.bytesforall.com/forumdisplay.php?f=2)
-   -   How To make Atahualpa pass Google's 'Mobile-Friendly Test' (http://forum.bytesforall.com/showthread.php?t=23158)

tbaxter Oct 11, 2016 01:58 AM

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?

juggledad Oct 11, 2016 06:19 AM

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

tbaxter Oct 11, 2016 12:30 PM

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?

juggledad Oct 11, 2016 12:51 PM

Quote:

I'm getting the "Powered by WordPress and Atahualpa" line under the copyright.
see: http://forum.bytesforall.com/showthread.php?t=2091

Quote:

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.

tbaxter Oct 11, 2016 02:43 PM

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!

maralian Dec 26, 2016 12:13 PM

Quote:

Originally Posted by juggledad (Post 112220)
Try this
1) add the following to ATO->Add HTML/CSS Inserts->HTML Inserts: Header
HTML Code:

<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
HTML Code:

<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?

juggledad Dec 26, 2016 12:50 PM

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.

SharonJ Mar 1, 2017 03:27 PM

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.

VivBounty Mar 10, 2017 07:05 PM

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

juggledad Mar 11, 2017 07:33 PM

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

VivBounty Mar 20, 2017 05:45 PM

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:(:confused:

VivBounty Mar 20, 2017 05:47 PM

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

juggledad Mar 20, 2017 06:11 PM

So are you saying your issue is fixed?

VivBounty Mar 21, 2017 10:19 AM

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

VivBounty Mar 21, 2017 11:25 AM

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

juggledad Mar 21, 2017 03:00 PM

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

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
HTML Code:

@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.

VivBounty Mar 21, 2017 06:15 PM

Thanks so much, JD. That's a great help.
:)
So appreciate it.

VivBounty Mar 21, 2017 08:08 PM

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.

juggledad Mar 22, 2017 03:46 AM

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

VivBounty Mar 23, 2017 09:48 AM

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.

VivBounty Mar 23, 2017 10:06 AM

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!!!!

taylorefl May 28, 2017 01:16 PM

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

juggledad May 28, 2017 05:12 PM

see the PM I've sent you.

VivBounty Mar 29, 2018 01:02 AM

Thanks JD!

This has ended a solid year of frustration for me.

Much appreciated.:)

kitfreeman Oct 23, 2018 03:48 PM

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?


All times are GMT -6. The time now is 04:39 AM.

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