|
#26
May 28, 2015, 06:18 AM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
I think to get the rotating header mages and responsive will take some jscripting which I am not too proficient at I may take a look at when I get a chance.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
#27
May 28, 2015, 06:22 AM
|
|
It would be okay if there could only be a static header on mobile devices / for the responsive header images, but I'd really like to keep the rotating header images on the computer screen.
|
#28
May 28, 2015, 06:24 AM
|
|
I'm not sure whether my last idea would make it ay easier. It would remain a javascript problem, I guess.
But thanks!
|
#29
May 28, 2015, 08:06 AM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
You could put both images there and hide the responsive image when the screen is wide and when the screen is small, display the responsive image and hide the rotating image.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
#30
May 29, 2015, 05:03 AM
|
|
That sounds like just what I'd want. Do you happen to have any idea about how to put that into code?
|
#31
May 29, 2015, 07:13 PM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
There is a problem with rotating images, it seems this code
HTML Code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
which gets added in the ATO->Add HTML/CSS Inserts->HTML Inserts: Header prevents the rotation.
other than that the flipping one image off and the other on will need be done is the jscript and I'm not proficient enough to provide you with the solution. Sorry.
__________________
"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; Jun 2, 2015 at 08:38 AM.
|
#32
Jun 2, 2015, 06:06 AM
|
|
Thanks, I guessed it would be a bit more complex but gave it a try anyway. Good to know what I have to work on.
|
#33
Jun 2, 2015, 03:40 PM
|
|
|
4 posts · Jul 2010
Utrecht, the Netherlands
|
|
Hi,
I made the header image responsive vis the code:
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
Unfortunately I now have just one header image instead of the rotating images. Do you have any tips how to solve this?
Thank you very much!
|
#34
Jun 2, 2015, 03:49 PM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
Sorry, nope. It seems like there is a conflict between teh rotating image jscript and the jscript to make it responsive.
You could try using a responsive header plufgin inplace of the Atahualpa %image option.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
#35
Jun 12, 2015, 11:57 AM
|
|
|
12 posts · Dec 2009
Illinois
|
|
To all the folks here, that help out those with malfunctioning themes, Thank you.
I though, am no longer am willing to devote any time to up-keeping, applying changes, or anything aside from writing post on my blog. Am seriously behind at this point in time.
After reading the things that could be done to Atahualpa (ver 3.5.3) and finding that an upgrade to (ver 3.7.23) did in fact loose my header, and would require me to do what I no longer care to do, I searched for a mobile friendly plugin.
Found some that got good Google ratings, but messed up my web site.
Did finally find one that didn't mess up my blog, and passed Googles
'Mobile Friendly' test.
https://wordpress.org/plugins/wordpress-mobile-pack/
http://www.thetalker.org/
http://www.thetalker.org/archives/author/talker6/
Google now says:
Awesome! This page is mobile-friendly.
So, will leave Atahualpa in the future, if need be, if updating the theme gets to problematic, time wise.
|
#36
Jun 12, 2015, 05:30 PM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
Quote:
The last question remaining is the rotation of the header images. Any way that is possible, you think?
|
not that I know of, there seems to be a conflict with the google code.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
#37
Jun 23, 2015, 02:24 PM
|
|
BTW - If you want to size the viewport also differently depending on desktop screen sizes - I use the following now (seems to be fine in all big browsers - I'm not sure I picked the right elements - but I think so).
This goes into CSS inserts. You will need to leave max-width in the Style and Configure Layout section blank (default).
Code:
/* #### small Desktops #### */
@media screen and (min-width: 801px){
tbody {max-width: 1080px; margin: auto;}
div#container {max-width: 1080px; margin: auto;}
table#layout {max-width: 1080px; margin: auto; font-size: 0.8em;}
}
/* #### HD Desktops #### */
@media screen and (min-width: 1260px){
tbody {max-width: 1150px; margin: auto;}
div#container {max-width: 1150px; margin: auto;}
table#layout {max-width: 1140px; margin: auto; font-size: 0.8em;}
}
/* #### FHD Desktops #### */
@media screen and (min-width: 1800px){
tbody {max-width: 1180px; margin: auto;}
div#container {max-width: 1180px; margin: auto;}
table#layout {max-width: 1170px; margin: auto; font-size: 0.85em;}
}
/* #### QHD Desktops #### */
@media screen and (min-width: 2400px){
tbody {max-width: 1240px; margin: auto;}
div#container {max-width: 1240px; margin: auto;}
table#layout {max-width: 1230px; margin: auto; font-size: 0.87em;}
}
/* #### UHD Desktops #### */
@media screen and (min-width: 3000px){
tbody {max-width: 1350px; margin: auto;}
div#container {max-width: 1350px; margin: auto;}
table#layout {max-width: 1340px; margin: auto; font-size: 0.95em;}
}
In order for the text-size to work, you need to take it out from Body, text and links tab, and of course also add it to the media only screen (which for me is max-width 800px)
e.g. table#layout {font-size: 0.85em;}
What I have not found out yet - is however how I can reduce the indent of the text on the media only screen?
I have 20 pixel indent - and would like to reduce that to 10 to fit a bit more content on mobile devices. I cannot find out where to put this however. I would also like to reduce the indent for bullets - also there I'm lost on how to decrease it.
__________________
Don't settle for lousy expensive Maps - Get free Maps based on Openstreetmap with great autorouting for cyclists, hikers and Mountainbikers at http://openmtbmap.org
Last edited by extremecarver; Jun 23, 2015 at 03:00 PM.
|
#38
Jul 25, 2015, 12:24 AM
|
|
I see how this works. But I'm having a problem with widgets. Instead of eliminating them from the mobile view, the code just pushes them all to the bottom. Is there any way to remove widgets from the mobile view?
|
#39
Jul 25, 2015, 02:16 AM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
Sure, but why? That deletes the responsive...try this. Change the code
HTML Code:
if( window.innerWidth > 767 ) {
jQuery(function($) {
$("#left").detach().prependTo('#bodyrow');
});
}
To
HTML Code:
if( window.innerWidth > 767 ) {
jQuery(function($) {
$("#left").detach();
});
}
And see if that works for you
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
#40
Jul 27, 2015, 11:24 AM
|
|
I was able to successfully use the css inserts etc that were suggested on this thread to make my site more responsive, thank you very much! I had to do some tweaks to several pages, but it's coming along nicely.
I have one issue that has boggled my brain. I have an input form that looks fine on the desktop, but the fonts/size on the phone are too small - just for the input labels and fields. Everything else resizes just fine, even regular tables. I've tried all the typical fixes I could think of with no luck.
Does the suggested @media code have anything in there that could cause this?
btw - I was able to use your @media snippet to allow certain pictures to display on the desktop and not on the phone, where appropriate. That works great.
|
#41
Jul 27, 2015, 04:20 PM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
What is the URL of the site?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
#42
Jul 28, 2015, 02:01 PM
|
|
Thanks for responding. I think I figured it out - conflict between other CSS on the page. Still tweaking.
The site is rolmt.net
|
#43
Aug 3, 2015, 08:58 PM
|
|
I was able to get nearly all of my site's pages and posts looking good on various devices, including iphones. Yay!
However, I have a page of short videos that do not play well in portrait mode on iphone using Atahualpa. They play sometimes in landscape (rotated screen). They work alright when I checked them using a different theme. What am I missing?
The page is:
http://www.rayoflightmassagetraining...-testimonials/
Thanks in advance, John
|
#44
Aug 4, 2015, 04:55 AM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
what happens if you take out all the code you add per this thread?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
#45
Aug 4, 2015, 11:31 PM
|
|
There isn't a whole lot of code on this page. Simply:
<div style="text-align: center;">
<h3 style="margin-top: 8px;"><strong>Video Testimonials from ROLMT Students</strong></h3>
<p id="LindaPullen-Brewer"> </p>
<iframe src="http://www.youtube.com/embed/OwTcB6mqi9I?rel=0&autoplay=0" height="177" width="310" allowfullscreen="" frameborder="0"></iframe>
<hr />
<p id="GeneSullivan"> </p>
<iframe src="http://www.youtube.com/embed/aXHYrAxqzvM?rel=0&autoplay=0" height="177" width="310" allowfullscreen="" frameborder="0"></iframe>
<hr />
etc, etc - more videos
</div>
|
#46
Aug 5, 2015, 11:19 AM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
Try changing teh height and width to 100%
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
#47
Aug 5, 2015, 11:15 PM
|
|
Changing width and height to 100% might work alright for a phone, but then it looks weird on the desktop - a very wide iframe.
Also, I saw on w3schools that "In HTML 4.01, the width could be defined in pixels or in % of the containing element. In HTML5, the value must be in pixels." So I guess % is deprecated.
Thanks anyway, not a huge issue. I appreciate the help.
|
#48
Oct 25, 2015, 08:27 AM
|
|
juggledad and others, thank you very much for your code! It's very nice to see, how good old Atahualpa works as an responsive theme.
However the script
<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>
seems not to work perfectly in IE 7 - 9. I still see 3 columns. Is there a way to make IE behave like most of the other browsers?
|
#49
Oct 25, 2015, 04:54 PM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
Sorry but I can't help you since I am a MAC user and don't use IE.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
#50
Nov 14, 2015, 09:11 AM
|
|
I did everything in the tutorial (will it handle right sidebars? I turned mine off until I get the rest of this working).
What happens now is that on mobile my left sidebar appears on the right. I want it to go to the bottom below the main content. Site is http://cheapsearchengineoptimizationsite.com
I tried disabling all plugins and changing widths but I can't get the sidebar to go to the bottom. Turned plugins back on when turning them off didn't help.
|
Thread Tools |
Search this Thread |
|
|
Display Modes |
Linear Mode
|
|