|
#51
Nov 14, 2015, 01:02 PM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
First shut off all your plugins and see how it looks.
If that doesn't work, do an export of your settings (ATO->export/import settings) and attach it 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
Last edited by juggledad; Nov 14, 2015 at 01:05 PM.
|
#52
Nov 15, 2015, 11:32 AM
|
|
Turning off plugins did not help. Left sidebar moves to right not down to bottom.
export attached
|
#53
Nov 15, 2015, 01:17 PM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
Do this:
1) go to ATO->Add HTML/CSS Inserts->CSS Inserts and copy what you have to a text file and save it.
2) copy the CSS from post #1 of this thread and add it to the CSS inserts
3) go test
What do you see happening?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
#54
Nov 17, 2015, 06:32 AM
|
|
I added all of that css to the bottom of my css inserts. I think you are saying remove everything from the css inserts except that section and then test. Am I understanding correctly? Perhaps some loose !important tags that are not being over-ridden?
|
#55
Nov 17, 2015, 06:28 PM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
what did you discover?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
#56
Nov 19, 2015, 05:36 AM
|
|
Yes when I remove the rest of the css it goes to the bottom. I'll start by getting rid of the 5 !important uses I probably don't need. If that doesn't work I'll add the css in in small chunks to find the culprit. Sorry for the late response- got delayed by a customer with an unreasonable deadline.
EDIT Solved it with the help of a validator -extra } in css and Google showed it as mobile friendly on the first try!
Last edited by zingo5; Nov 19, 2015 at 07:20 AM.
|
#57
Feb 13, 2016, 12:21 PM
|
|
|
24 posts · Jun 2014
Melbourne, Australia
|
|
As mentioned previously, I had issues with images because of this part on the end of the CSS section:
Code:
.hentry img {
max-width: 100%;
height: auto !important;
display: block !important;
}
Noticed that along with my other changes, viewing attachments on their own post page meant they were wider than the screen (eg: clicking on the image in a gallery).
Ended up moving this INSIDE the
Code:
@media only screen and (max-width: 767px)
section, and changing it slightly to:
Code:
.hentry .attachment img {
max-width: 99%;
height: auto !important;
display: block !important;
}
Note: In the original post this CSS is outside the @media criteria, which means it applies to all size screens. This might be useful for some but isn't a huge issue for out site. YMMV.
|
#58
Apr 6, 2016, 02:46 PM
|
|
How can I get the rotating header images to match the width of the body now that it is a percentage? I see a few methods which work when they are not rotating but cannot find for rotating.
Last edited by aygart; Apr 6, 2016 at 04:10 PM.
|
#59
Apr 6, 2016, 04:27 PM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
I don't know of any solution to this. I'd suggest using a responsive header image plugin instead oh the Atahualpa built I rotating image option.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
#60
Apr 6, 2016, 05:00 PM
|
|
Thanks! Any suggestions for one?
|
#61
Apr 6, 2016, 07:10 PM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
city heaader image rotator
soliloquy
womderslider
wp nivo slider
wow slider
take your pick - what works for one person may not be what the next person wants....
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
#62
Apr 8, 2016, 08:52 AM
|
|
How do you get the slide show into the header? They all seem to make a slideshow which gives a shortcode. Where woulkd I insert that shortcode?
Last edited by aygart; Apr 8, 2016 at 10:31 AM.
|
#63
Apr 8, 2016, 05:24 PM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
You could create a dynamic widget area in the header option, add a shortcode aware plugin and use its widget and put the shortcode in that widget
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
#64
Apr 10, 2016, 10:17 AM
|
|
Thank you! I got it working, but now I cannot figure out how to get rid of the blue area under the header image
My site is www.lowerwatt.com
Edit: I changed the color (it is the Layout Container Background) to match the menu so that it does not stick out but still cannot figure out how to get rid of it altogether.
Last edited by aygart; Apr 10, 2016 at 10:51 AM.
|
#65
Apr 10, 2016, 12:46 PM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
try adding this to the CSS inserts
HTML Code:
#metaslider_widget-2 {margin: 0;}
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
#66
Apr 10, 2016, 08:25 PM
|
|
This worked perfectly, and my site now shows by google as mobile optimized. You guys are the best!
|
#67
Aug 31, 2016, 04:29 PM
|
|
Quote:
Originally Posted by juggledad
To get your Atahualpa site pass the Google 'Mobile-Friendly Test' do the following. This will make your site mobile friendly. If you don't pass the test after doing this - disable ALL your plugins and test again to see if a plugin is causing the issue.
1) go to ATO->Style & configure LAYOUT->Layout WIDTH and type (FLUID or FIXED) and set it to a percentage (as opposed to a 'fixed' width) then set the 'Layout MIN width' option to 320 (iPhone 4 size) or remove it altogether.
2) add the following to ATO->Add HTML/CSS Inserts->HTML Inserts: Header
HTML Code:
<meta name=viewport content="width=device-width, initial-scale=1">
3) add the following to ATO->HTML Inserts: Body Tag
HTML Code:
onresize="OnResizeDocument()"
4) Add the following to ATO->Add HTML/CSS Inserts->HTML Inserts: Body Bottom
HTML Code:
<script>
jQuery(document).ready(function($) {
if( $(window).width() < 768 ) {
// If any left sidebar exists
if ( $('#left').length || $('#left-inner').length ) {
$("#middle").detach().prependTo('#bodyrow');
}
}
});
</script>
<script type="text/javascript">
function OnResizeDocument () {
if( window.innerWidth < 767 ) {
jQuery(function($) {
$("#middle").detach().prependTo('#bodyrow');
});
}
if( window.innerWidth > 767 ) {
jQuery(function($) {
$("#left").detach().prependTo('#bodyrow');
});
}
}
</script>
5) add the following to ATO->Add HTML/CSS Inserts->CSS Inserts
HTML Code:
@media only screen and (max-width: 767px) {
table#layout,
table#layout > tbody,
table#layout > tbody > tr,
table#layout > tbody > tr > td,
table#layout > tr,
table#layout > tr > td,
table#layout td#header,
table#layout td#left,
table#layout td#left-inner,
table#layout td#middle,
table#layout td#right,
table#layout td#right-inner,
table#layout td#footer {
display: block;
}
table#layout > colgroup {
display: none;
}
div#wrapper,
td#middle {
width: auto;
}
}
.hentry img {
max-width: 100%;
height: auto !important;
display: block !important;
}
Note: in steps 4 and 5 you can adjust the number (767) to suit your choice.
Thanks to Flynn, sawyerjw, yukoner, kayphoonstar and extremecarver for their contributions.
|
When I did this - my header disappeared - on my regular monitor (didn't even get to look at the mobile devices). I just have one (no rotating images)... Any suggestions?
I did read thru the thread - but maybe missed the solution?
|
#68
Aug 31, 2016, 05:35 PM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
export your settings and attach them to a reply (dashboard->appearances->ATO->Export/Import)
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
#69
Sep 4, 2016, 12:07 PM
|
|
|
1 posts · Nov 2014
London, UK
|
|
But it says
"Since 3.6.5 PHP code cannot be used anymore in HTML/CSS Inserts."
I've used the mobile theme from jetpack previously but it is not working anymore.
I've just started making a child theme and using media queries. Not sure if this is influencing the above.
|
#70
Sep 4, 2016, 05:54 PM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
@reni137 a what php do you see in the above?
I have found very few cases for making a child theme with Atahualpa.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
#71
Sep 4, 2016, 06:28 PM
|
|
Hello,
After changed the ATO settings, why the images in my website www.jualsewakios.com are displayed in 1 column ?
I want it can be displayed in two columns for mobile view and 3 columns in desktop view. For comparison, you can check www.tempat-usaha.com
Besides that, how to make the menu above header image can be displayed as pull down menu in mobile view ?
Thanks.
Last edited by mykios; Sep 4, 2016 at 09:04 PM.
|
#72
Sep 5, 2016, 01:25 AM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
@mykois - your site is not fully loading. You should check your error log for possible errors.
This code does not make Atahualpa into a full mobile site, it allows it to pass googles mobile test
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
Last edited by juggledad; Sep 5, 2016 at 04:38 AM.
|
#73
Sep 15, 2016, 06:51 AM
|
|
Thanks for this very helpful code! I use the fixed header position you taught me, which has been working great.
#header {position:fixed;}
Still maybe this is the reason why the header text doesn’t shrink enough when using a mobile device (the logo image doesn’t either, but that is not a problem). Any advise highly appreciated.
|
#74
Sep 15, 2016, 06:55 AM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
@BertL what is the url so I can see the image.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
#75
Sep 22, 2016, 07:46 PM
|
|
I have been fighting with this for a week now. I tried everything in this thread and a few others and it mostly works. Last time I checked I passed the mobile-friendly test but my logo only shows a tiny bit. It doesn't resize it it just only shows a piece of it. Thanks for any help the site is http://www.survivalpunk.com/ Thanks for any help
|
Thread Tools |
Search this Thread |
|
|
Display Modes |
Linear Mode
|
|