not a support questionHi
my Abundance site does not fill the screen in either portrait or landscape mode, their is a big empty area on the right
See these screenshots http://gasolicious.com/help/abundance-ipad.html, the website address is gonereading.com
Wordpress 3.3.1, Abundance 1.1, Woocommerce 1.3.2.1
I've got the same issue with my Corona page left-aligning and leaving a big gap of background on the right, but the spacing to the right is about 40-45 pixels, not as dramatic as mgason's image, but still unsightly. I'd prefer the site to fill the screen horizontally, but alternatively if the page was simply centered with background to either side, that would be passable.
I took a look with an iPad at several other Wordpress sites featured on the Wordpress homepage, and they don't have the problem. A few were centered, with 5-8 pixels on either side. Most filled the screen.
Curiously, the homepage of ThemeForest has a left-alignment issue on the iPad, too, with a gap of about 12 pixels to the right. The Corona demo page does not have an issue (whether fullscreen or set to Boxed style like my page).
Could this be a !DOCTYPE issue? This w3 page shows that unless a !DOCTYPE is fully specified, some browsers won't get the .container tag right. For example, IE8 will add 17 pixels to the right for a scrollbar. See http://www.w3schools.com/css/css_align.asp
Or I don't know if specifying #page in CSS would be relevant, see: http://www.coolestguyplanet.net/extend-the-twenty-eleven-theme-menu-navigation-to-fullscreen/
Dude, du hast schon meine eigene URL.
Danke!
I rechecked the ThemeForest homepage, and that's a different issue (page elements formatting incorrectly). My hunch is that it is an improper DOCTYPE! tag... Corona comes with a header.php file which doesn't properly specify. (It is <!DOCTYPE html> presently). So I will try to fix later today on my end and see if there's any result. Please bring this to Kriesi's attention, as all pages should correctly identify version of HTML or XHTML, etc., and perhaps this could be part of any new update to templates...
http://codex.wordpress.org/HTML_to_XHTML
The issue may not occur with most modern browsers, since they 'figure it out' but perhaps Safari and others are an exception.
Sorry mgason, I was not able to fix my site with what I thought might be the issue (added proper xhtml tags to header.php and specified #page max width to none in style.css.)
On your site when loading in iPad: does it first show up full width and then 'jump' after fully loading to a margin on right?
Hope Dude or Kriesi can help!
Ok so I did not understand that the DOCTYPE tag was in fact correct to begin with; Kriesi is using HTML5 and CSS3... so please disregard my earlier explorations for a solution.
What I did experiment with today was adding:
<meta name = "viewport" content = "initial-scale = 1.0">
to the header.php file. This will render my pages correctly ONCE, when loaded in landscape mode on iPad, without errors. The page actually shows up like most other Wordpress Blogs. 1:1, centered, with a bit of border to right and left. Very nice.
However, it will also prevent the iPad from rotating properly to portrait mode. The pages will not resize properly. So it is not a fix, but perhaps a key to a solution.
The viewport meta tag can alternately be added to functions.php . I also played with this:
//////////////////////////////////////////////
/// Add the /viewport meta to the header
/////////////////////////////////////////////
add_action('wp_head', 'add_viewport_meta');
function add_viewport_meta() {
echo "\n" . '<meta name="viewport" content="width=1100" />' . "\n";
}
Which is essentially the same thing as adding <meta name = "viewport" content = "width = 1100"> to the header.php file.
When the width is set to 1100 pixels (using a viewport meta tag with either method--in header.php or functions.php), there is a then a large margin to the right and to the left, AND the iPad correctly maintains two margins when rotating. But again, it is not desirable to have these margins, especially in landscape mode... resolution of the site is lost, and the main page width clearly adheres to a resolution which should be optimal in iPad landscape. Values lower than 1100pixels leave a larger margin to the right than to the left.
Something within the formatting of the page is clearly causing the iPad to incorrectly size the viewport to accommodate a page which it thinks is larger than 1000 pixels (does it think something extends out to the right--an overflow? I don't know. I suspect that's the case for initial poster's site and mine too).
SO: Setting viewport to 1100 pixels will provide a temporary fix, but a sub-optimal viewing experience. The CSS is fairly complex, so Kriesi & Dude: I hope you can determine which page elements are causing the iPad to think the site is larger than 1050 pixels wide?
Thanks!
Ok, I figured out my site problem. The answer is 'duh'!
Hopefully this will help you mgason:
I first removed header and footer first to see if something there was creating overflow into the margin (created backup files of header.php and footer.php, then erased non-critical content). That had no effect.
Then I restored header and footer and created a blank page with header and footer in place and that had no effect.
As it turned out, I had one too many menu items plus a custom logo, which evidently caused overflow into margin within the menu. (in my case it was the Descriptions used under the menu items.)
It appears the descriptors underneath the menu items were causing the problem... they were all on the page, looking nice, but must have messed with iPad's interpretation of the floats or something like that. So they were right up against the page limit size.
So I think if you eliminate things like I did by process of elimination, you will find there's some content which overflows on your site... this can probably be addressed by modifying your stylesheet in a child theme or within the Admin panel... maybe Chris, Dude or Kriesi have other suggestions... hope that helps!
You must log in to post.
Please start by registering an account for this forum here
Create a new thread and tell me what problems you are encountering and what you want to know.
There is no step 3 :)
We try to answer all questions within a day, monday-friday.
