What is the URL of the site?
|
Thanks for responding. I think I figured it out - conflict between other CSS on the page. Still tweaking.
The site is rolmt.net |
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 |
what happens if you take out all the code you add per this thread?
|
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> |
Try changing teh height and width to 100%
|
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. |
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? |
Sorry but I can't help you since I am a MAC user and don't use IE.
|
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. |
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 |
1 Attachment(s)
Turning off plugins did not help. Left sidebar moves to right not down to bottom.
export attached |
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? |
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?
|
what did you discover?
|
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! |
As mentioned previously, I had issues with images because of this part on the end of the CSS section:
Code:
.hentry img { Ended up moving this INSIDE the Code:
@media only screen and (max-width: 767px) Code:
.hentry .attachment img { |
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.
|
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.
|
Thanks! Any suggestions for one?
|
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.... |
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?
|
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
|
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. |
try adding this to the CSS inserts
HTML Code:
#metaslider_widget-2 {margin: 0;} |
This worked perfectly, and my site now shows by google as mobile optimized. You guys are the best!
|
Quote:
I did read thru the thread - but maybe missed the solution? |
export your settings and attach them to a reply (dashboard->appearances->ATO->Export/Import)
|
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. |
@reni137 a what php do you see in the above?
I have found very few cases for making a child theme with Atahualpa. |
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. |
@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 |
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. |
@BertL what is the url so I can see the image.
|
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
|
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? |
Quote:
Quote:
|
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! |
All times are GMT -6. The time now is 12:58 PM. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.